CSS悬停选择器 - JS或Jquery解决方案

Question

我有这样的事情:

<article class="leading-0">
    <h2>
        <a href="link">link title</a>
    </h2>
    <ul class="actions">
        <li class="print-icon">
            <a ...><img...></a>
        </li>
        <li class="email-icon">
            <a ...><img...></a>
        </li>
    </ul>
    <dl class="article-info">
        <dt class="article-info-term">...</dt>
        <dd class="hits">...</dd>
    </dl>
    <p>...</p>
</article>

当你徘徊li在ul.tools我想要设置h2元素的样式.

如果有人能提供帮助并且看看是否可能,我会很高兴.

我记得曾经做过一次,但不记得了.

Answer 1

问题是你不能只用CSS做到这一点.

当您使用CSS选择器选择元素时,选择器无法选择父元素,换句话说,您无法以任何方式反转元素...

您可以使用选择子元素或相邻元素 +

所以,在你的情况下

<h2><a> link </a></h2>
<ul class='tools'>
    <li> tool 1 </li>
</ul>

当你使用时.tools li:hover,现在你不能选择其他任何元素li,你可以先选择相邻li的悬停,li或者你可以选择任何子元素li.

因此,一旦继续选择元素,如果在同一级别上,则无法选择前一个元素,也无法选择父元素,也无法选择父元素的相邻元素.

如果你想完成这个,你可以使用Javascript或jQuery来完成.

正如您现在对jQuery解决方案开放,您可以使用

$("ul.actions li").hover(function(){
   $(this).parent().prev().find('a').toggleClass("hover");
});

Demo

在上面的代码中,我首先li使用这个关键字进行定位,而不是寻找将要选择的父元素ul,然后.prev()用于寻找前一个兄弟元素,最后我们.find('a')用来定位a嵌套在里面的元素h2

如果您希望只CSS的方式,比你能做的最好的事情是包裹h2和ul在一个单一的元素,比方说div有一个元素class说.wrapper比你可以用这样一个选择

.wrapper:hover h2 a {
    color: red;
}

Demo