如何解决将鼠标悬停在导航上 li,但排除其余li元素
.nav li:hover a{
background-color: darkgrey;
}
.navbar li {
list-style-type: none;
float: right;
padding-left: 5px;
padding-right: 5px;
margin-top: 17px;
font-family: myriad-pro,sans-serif;
font-weight: lighter;
<body>
<nav class="navbar">
<ul>
<li><a class="list" href="./test.html"> Home</a></li>
<li><a class="list" href="#"> Service</a></li>
<li><a class="list" href="#"> Contact</a></li>
<li><a class="list" href="./test.html"> Training</a></li>
</ul>
嘿。
在导航栏中,我给li元素提供了悬停效果。 现在的问题是,它会自动应用于页面上的所有li。 我只想要我的导航效果。酒吧,但我尝试过的方式还是页面上的全部或全无。 代码段中的代码不起作用,我无法使列表悬停的唯一方法也不是: li:将鼠标悬停在{background-color:darkgrey;}上,但是显然它将所有li应用于页面。 有没有解决的办法? 谢谢!
解决方法
a.list:hover {
background-color: darkgrey;
}
.navbar li {
list-style-type: none;
float: right;
padding-left: 5px;
padding-right: 5px;
margin-top: 17px;
font-family: myriad-pro,sans-serif;
font-weight: lighter;
<body>
<nav class="navbar">
<ul>
<li><a class="list" href="./test.html"> Home</a></li>
<li><a class="list" href="#"> Service</a></li>
<li><a class="list" href="#"> Contact</a></li>
<li><a class="list" href="./test.html"> Training</a></li>
</ul>
CSS的逻辑错误。要具有悬停效果,您需要:
a.(class/id):hover {
style
}
但是,我也不确定该列表是否真的是一个好主意。这将最终形成不良和无效的习惯。 造访Nav-Link之后,颜色会变色,因此可以考虑:
a.link:link {
text-decoration: underline;
color: #141414;
}
a.link:visited {
text-decoration: underline;
color: #141414;
}
a.link:active {
text-decoration: underline;
color: #141414;
}
这将防止链接按钮文本不必要地改变颜色。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。