Question

有没有办法在悬停时选择顶层元素？

例如，假设我有两个div。在第一个中，顶层将是span.myText1，但是如果我从span中悬停但仍保留在div中，则div将是我悬停在上面的顶层。

类似的例子适用于第二个div，除了它有更多层。

我想.addClass（'outline'）仅限于顶层。

CSS

.outline {
    outline: 5px solid #66ff66;
}

HTML

<div class="divs">
    <span class="myText1">some text</span>    
</div>

<div class="myDiv2">
    <div style="width:300px">   
       <span class="myText2">some text <button value="myButton"></span>
    </div>
</div>

我认为.hover（）是要走的路，但不确定如何。

$(myTopLayer).hover(
    function() {
        $(this).addClass('outline');                
    },
    function () {
        $(this).removeClass('outline');
    }
);

Answer 1

更新 - 误解了你的问题;我之前的回答是与你想要的相反！

在悬停时，将类添加到当前元素并从其所有父元素中删除，并在鼠标悬停时，从元素中删除类并使用first()

添加到直接父div

请注意，代码使用的是通用div和span，您可能希望使用特定代码，以便所有div和span都不会发生这种情况。这页纸。

See demo

$(function () {
    $("div,span").hover(

    function (e) {
        $(this).addClass('outline').parents().removeClass('outline');
        e.stopPropagation();
    },

    function (e) {
        $(this).removeClass('outline').parents("div").first().addClass('outline');
    });
});

以前的回答 -

在函数中，只需在应用样式之前检查是否存在父div。如果存在父DIV，则将样式添加到最后一个父项（最顶层），否则将样式应用于当前元素。

您可能希望将$("div").hover(...)中的选择器更改为特定的父DIV属性。

See demo

$(function () {
    $("div").hover(

    function () {
        if ($(this).parents("div").size() > 0) {
            $(this).parents("div").last().addClass('outline');
        } else {
            $(this).addClass('outline');
        }
    },

    function () {

        if ($(this).parents("div").size() > 0) {
            $(this).parents("div").last().removeClass('outline');
        } else {
            $(this).removeClass('outline');
        }

    });


});

使用.hover（）选择顶层元素

1 个答案: