Question

我在<span>内有一些<div>个元素。当您将鼠标悬停在一个<span>上时，它应突出显示所有前面的 <spans>和悬停的<span>。

我怎样才能使用CSS或jQuery？

我怀疑jQuery的答案会做到以下几点，但我找不到1＆amp;的功能。 2。

获取当前悬停元素的孩子＃
选择该数字以下的所有儿童
将'hover'类添加到他们

Answer 1

您可以使用jQuery执行此操作：

$('span').hover(function(){
    $(this).prevAll().addClass('hover'); 
},function(){
    $(this).prevAll().removeClass('hover'); 
});

Demonstration

这使用prevAll来选择同一div的所有前面的跨度。不需要使用当前元素的索引，但您可以使用索引函数获取它，然后您将使用lt选择器（$(this).sibblings(":lt("+$(this).index+")")）。当然prevAll要简单得多。

正如elclarns所注意到的，这可以在

中缩短

$('span').hover(function(){
    $(this).prevAll().toggleClass('hover'); 
});

Answer 2

这取决于兼容性，可能与CSS有关，虽然没有添加类名：

div:hover span {
    /* colours all descendent spans of hovered-div */
    background-color: #ffa;
}

div:hover span:hover,
div:hover span:hover ~ span {
    /* 'de-colours' the hovered-span, and
         the subsequent sibling spans */
    background-color: #fff;
}

Answer 3

根据提供的示例，我在这里看不到任何困难，我们将使用prevAll（）函数根据当前项目选择所有以前的兄弟姐妹。

    $("span").hover(function(){
       $(this).prevAll().addClass("hover");

},    function(){
        $(this).removeClass("hover");
})

一个工作示例：http://jsfiddle.net/6zm3E/1/

选择同一父项的所有前面的子项

3 个答案: