0

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

例如，假设我有两个 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');
    }
);
4

1 回答 1

1

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

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

请注意，代码使用的是泛型div和span，您可能希望使用特定的，这样就不会发生在所有页面div和span页面上。

看演示

$(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 属性。

看演示

$(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');
        }

    });


});
于 2013-09-04T04:43:08.527 回答