显示像悬停的 <li> 行答案

【问题标题】：Show a <li> line like is hovered显示像悬停的 <li> 行
【发布时间】：2013-01-13 04:45:35
【问题描述】：

我有一个简单的 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>

【问题讨论】：

标签： css hover html-lists line

【解决方案1】：

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

#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 这样的服务器端编程

【讨论】：

值得一提的是，OP 不需要他拥有的第一个 LI 上的那些课程。我什至不确定在 text 之前有一个井号标签是一个有效的类名吗？
除了第二个之外，您还可以使用“#menu a:hover, #menu .current”，这样您就可以将两者合二为一了。
@BillyMoat 他没有使用散列来命名，他试图以该 id 为目标，因此他也在 id 中使用散列，例如，如果我声明一个名为 @987654324 的类@ 所以他会像 <span class=".current"> 一样使用它而不是 <span class="current">
@Mr.Alien - 啊，好吧 - 我被骗了！
OK，比较简单。感谢您的帮助