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的父元素，然后使用{{ 1}}查找以前的兄弟元素，最后我们使用.prev()来定位嵌套在.find('a')内的a元素

如果您想要唯一的CSS方式，那么您可以做的最好的事情就是将h2和h2包装在一个元素中，比如{{1使用ul说div的元素比使用像

这样的选择器

class

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;  
}

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

3 个答案: