1

我有一个简单的 CSS 列表。我希望第一<li>行显示为悬停。我怎样才能做到这一点？我曾尝试过这样的事情：<li class="#menu a:hover"><a href="#">Option 1</a></li>但不幸的是不起作用。

感谢您的时间！

代码是：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>A simple menu</title>
<style type="text/css">
#menu a:hover{
    background-color:   yellow;
}
</style>
</head>
 <body>
  <div id="menu">
   <ul>
    <li class="#menu a:hover"><a href="#">Option 1</a></li>
    <li><a href="#">Option 2</a></li>
    <li><a href="#">Option 3</a></li>
    <li><a href="#">Option 4</a></li>
   <ul>
  </div>
 </body>
</html>
4

1 回答 1

2

我猜你想要第一个链接的黄色背景，所以这样做

#menu ul li:nth-child(1) a {
    background-color:   yellow;
}

或者简单地给出一个类，例如.current

.current {
   background-color:   yellow;
}

<div id="menu">
  <ul>
    <li><a href="#" class="current">Option 1</a></li>
    <li><a href="#">Option 2</a></li>
    <li><a href="#">Option 3</a></li>
    <li><a href="#">Option 4</a></li>
  <ul>
</div>

如果您打算突出显示当前页面而不是答案是否定的，则无法使用 CSS 来实现，您将需要 JavaScript/jQuery 或 PHP 等服务器端编程

于 2013-01-29T15:03:34.783 回答