悬停在一个链接上时 - 更改所有其他链接的样式
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了悬停在一个链接上时 - 更改所有其他链接的样式相关的知识，希望对你有一定的参考价值。
我有一个链接列表。当我悬停/专注于其中一个。我想改变没有悬停的链接的样式。
<nav>
<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</nav>
CSS
li {
list-style: none;
display: inline-block;
}
a {
color: black;
text-decoration: none;
padding: 15px;
opacity: 1;
}
a:hover {
color: black;
}
a:hover li a {
opacity: 0.5
}
这通常会改变不同元素的样式，但这种逻辑似乎不适用于链接。
先感谢您
答案
使用nav:hover a将效果添加到所有链接。
使用nav li a:hover将效果添加到单个链接
如评论中所述，您的HTML无效。 <li>必须是<ul>或<ol>的孩子。
ul {
padding: 0;
}
li {
list-style: none;
display: inline-block;
}
a {
color: black;
text-decoration: none;
padding: 15px;
opacity: 1;
}
nav:hover a {
opacity: .5;
}
nav li a:hover {
opacity: 1;
}<nav>
<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</nav>以上是关于悬停在一个链接上时 - 更改所有其他链接的样式的主要内容，如果未能解决你的问题，请参考以下文章