悬停链接时如何更改另一个元素的样式 - 没有 jQuery/JavaScript？
ul>li>a:hover main {
opacity: 0.1;
}
main p {
font-size: 200px;
}<header>
<ul>
<li><a href="#">Hover me</a></li>
</ul>
</header>
<main>
<p>Hello World!</p>
</main>我想在链接悬停时更改opacity文本的main。
是否可以？
编辑
我试过一个兄弟姐妹：
a:hover ul {
opacity: 0.5;
}<header>
<ul>
<li><a href="#">Hover me</a><span></span>
<ul>
<li>Child 1</li>
<li>Child 2</li>
<li>Child 3</li>
</ul>
</li>
</ul>
</header>但是还是不行...
不可能使用+or~兄弟选择器，因为<a>和<main>元素不是兄弟。因此你可以使用 JavaScript。例如，可以fadeTo()在hover()方法内使用：
$("a[data-opacity-target]").hover(function() {
var selector = $(this).data("opacity-target");
$(selector).fadeTo(500, 0.1);
}, function() {
var selector = $(this).data("opacity-target");
$(selector).fadeTo(500, 1);
});main p {
font-size: 200px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<ul>
<li><a href="#" data-opacity-target="main">Hover me</a></li>
</ul>
</header>
<main>
<p>Hello World!</p>
</main>在您的EDIT部分，您应该使用a:hover~ul选择器而不是a:hover ul.
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句