jQuery：在悬停元素上添加边框，但不包括父元素

Question

jQuery：在悬停元素上添加边框，但不包括父元素

4

我有这段代码：

var originalBorder = container.css("border");    
container.hover(function(event) {
            event.stopPropagation();
            $(this).css("border", "1px solid "+options.color);
       },function(){
            $(this).css("border", originalBorder);
       });

我正在使用它来为当前悬停元素添加边框。但是，例如，如果一个在

中，它们都会获得边框。我只想针对目标。我认为添加event.stopPropagation()就可以解决问题（这是我在Flex中所做的，那是我更习惯的东西），但我猜这是一个实时事件，我甚至不知道这是什么意思。所以基本上如何针对最年轻的元素而不触发父元素？

谢谢！！

更新

一些更多的信息。我正在尝试将此效果添加到每个元素。所以我实际上正在向

和添加效果，但当最年轻的元素被悬停时，我只想触发

。当年轻的元素（例如在

中的）被悬停时，只有被触发。上面的代码是一个插件，我像这样调用它：#("*").doBorders()

- JD Isaacks

这应该可以工作，container 在哪里定义了？你能贴一些示例标记吗？ - Nick Craver

@Nick，我的插件中第一行代码是 var container = this; - JD Isaacks

我理解你的意思（在你的更新中），它们都添加边框的原因不是因为事件被“传播”，而是因为从技术上讲，鼠标悬停在两个元素上，因为子元素包含在父元素内。 - Bobby

@Bobby，是的！但是有没有变通的方法？也许可以迭代子元素并查看是否有任何一个被悬停？（我知道这可能不是非常优雅的解决方案） - JD Isaacks

嗯...请看下面的更新，也许你可以从这样一个角度来解决它：悬停函数总是清除所有其父元素的边框（或将它们设置为原始值），只留下自己具有新边框（最里层被悬停的元素）。 - Bobby

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Bobby · Accepted Answer

我认为问题只是在于您的选择器选择了容器。

如果可以的话，请确保第一个选择器选择的是子元素——您想要操作的子元素...

像这样：

    $(".childSpanClass").hover(
        function () {
            $(this).css("border", "1px solid "+options.color);
        },
        function () {
            $(this).css("border", originalBorder);
        }
    );

如果您无法在那里选择子项，则可以在函数内部选择子项，就像这样：

    $(".container").hover(
        function () {
            $(this).children(".childClass").css("border", "1px solid "+options.color);
        },
        function () {
            $(this).children(".childClass").css("border", originalBorder);
        }
    );

更新：根据您的更新，您可能想从孩子清理父母边框的角度尝试解决这个问题。

$(".container").hover(
    function () {
        $(this).parents().css("border", "");
        $(this).css("border", "1px solid blue");
    },
    function () {
        $(this).css("border", "");
    }
);