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

在上面的代码中，我首先使用 this 关键字定位li，然后，我正在寻找它的父元素，它将选择ul，然后我使用.prev() 来寻找前一个兄弟元素，最后我们使用.find('a') 来定位嵌套在h2 中的a 元素

---

如果你想要唯一的 CSS 方式，最好的办法是将 h2 和 ul 包装在一个元素中，比如 div 元素和 @ 987654340@ 说 .wrapper 比你可以使用像

这样的选择器

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

Demo

Answer 2

您需要使用+ 运算符， 这是一个例子：http://jsfiddle.net/TheBanana/JaEGF/

#div1:hover + #div2{
   background:green;
}

Answer 3

试试这个 CSS 代码：

article ul.tools li:hover{
    color:green;
}   
article h2 { 
    color:red;  
}