显示像悬停的 <li> 行
Posted
技术标签:
【中文标题】显示像悬停的 <li> 行【英文标题】：Show a <li> line like is hovered 【发布时间】：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>
【问题讨论】：
【参考方案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，比较简单。感谢您的帮助以上是关于显示像悬停的 <li> 行的主要内容，如果未能解决你的问题，请参考以下文章