[英]Change whole <li> color on hover, not just href
我需要更改悬停时li的整个背景颜色。 我看过Google和Stackoverflow上的其他示例,但我认为我的代码中可能存在一些冲突。
HTML:
<div id="nav_bar">
<div id="nav_bar_inside">
<div class="nav_bar_content">
<ul>
<li><a>Home</a></li>
<li><a>Music</a></li>
<li><a>Pictures</a></li>
<li><a>Links</a></li>
<li><a>Biography</a></li>
</ul>
</div>
</div>
</div>
CSS:
.nav_bar {
-webkit-animation:leftBar 1s; /* Safari and Chrome */
-webkit-animation-fill-mode: forwards;
float: left;
background: #666;
position:fixed;
z-index: 15;
box-shadow: 0px 0px 10px 1px rgba(119, 119, 119, 0.75);
-moz-box-shadow: 0px 0px 10px 1px rgba(119, 119, 119, 0.75);
-webkit-box-shadow: 0px 0px 10px 1px rgba(119, 119, 119, 0.75);
}
#nav_bar #nav_bar_inside li {
list-style-type: none;
border-bottom: 1px solid #000;
height: 50px;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 22px;
text-transform: uppercase;
text-align: center;
vertical-align: middle;
padding-top: 30px;
}
#nav_bar #nav_bar)inside a {display: inline-block;}
#nav_bar #nav_bar_inside li a:hover {
background-color: rgba(255, 0, 0, 0.4);
display: block;
cursor: pointer;
}
这行:
#nav_bar #nav_bar_inside li a:hover
应该:
#nav_bar #nav_bar_inside li:hover
这种方法的另一个好处是使整个LI都可点击:
li {padding: 0;}
li a {display: block;}
感谢佳能的小提琴。 在这里整理一下:
:hover on the li-这是您的mod:
#nav_bar #nav_bar_inside li:hover {
background-color: rgba(255, 0, 0, 0.4);
display: block;
cursor: pointer;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.