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

CSS Hover Selector - JS or Jquery solution

本文关键字：Jquery 解决方案 -JS 悬停 选择器 CSS      更新时间：2023-09-26

我有这样的东西：

<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元素的样式。

如果有人能帮忙，看看这是否可能，我会很高兴。

我记得以前做过一次，但记不起来了。

问题是您不能仅使用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");
});

演示

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

如果您想要仅使用的CSS方式，那么您可以做的最好的事情就是将h2和ul封装在一个元素中，比如说div元素带有class，比如.wrapper，而您可以使用类似的选择器

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

演示

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

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

试试这个CSS代码：

article ul.tools li:hover{
    color:green;
}   
article h2 { 
    color:red;  
}
相关文章：