如何在链接悬停时更改另一个元素的样式 - 无需 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当链接悬停时。
是否可以？
EDIT
我和一个兄弟姐妹一起尝试过：
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>
但还是不行...
这是可能的，但由于 CSS 级联行为，布局必须位于不同的位置。无论您将鼠标悬停在何处（称为触发器），还是因悬停而消失的任何物体（称为目标），都必须具有特定的位置才能发挥作用。
Trigger -
可以作为“年长”兄弟姐妹出现在目标之前。
OR
可以是目标的祖先或目标的祖先的兄弟。
Demo
a {
border: 3px dotted blue;
padding: 0 5px;
color: #000;
text-decoration: none;
display: block;
}
a.aunt {
border-color: red;
margin: 10px 0;
}
a.aunt:hover+main p {
opacity: 0.1;
transition: 1s;
}
a.brother:hover+p {
color: red;
}
a.sister:hover~p {
color: blue;
}
main.mom {
border: 5px dashed tomato;
}
main.mom p {
opacity: 1;
font-size: 50px;
margin-top: 10px;
transition: 1s;
border: 3px solid red;
}
main.mom:hover p {
font-size: 100px;
}
b {
font-size: 25px
}
<a href='#/' class='aunt'>Aunt - Older sibling of an ancestor of the target</a>
<main class='mom'>
<a href='#/' class='sister'>Big Sister - Sibling to target with <br>sibling combinator: <b>~</b></a><br><br>
<a href='#/' class='brother'>Big Brother - Adjacent Sibling to target with <br>adjacent sibling combinator: <b>+</b></a>
<p>Target</p>
<a href='#/' class='brother'>Little Brother - Cannot influence target when hovered on.</a>
<br> Mom - hovering over affects all descendants<br>(i.e. all siblings and siblings' and target's descendants)<br>
</main>
<a href='#/' class='aunt'>Aunt - This is after target's ancestor so it cannot influence target</a>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
