jQuery:在悬停元素上添加边框，但不在父元素上添加边框

Question

我有这个代码:

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

我用它来为当前悬停的元素添加边框。然而，例如，如果 span 位于 div 内，它们都会获得边框。我只想定位 span。我认为添加 event.stopPropagation() 就可以解决问题(这就是我在 Flex 中所做的，这是我更习惯的)，但我想这是一个现场事件，我什至不明白这意味着什么。那么基本上如何才能在不触发 parent 的情况下定位最年轻的元素呢？

谢谢!!

更新

更多信息。我正在尝试将这种效果添加到每个元素中。所以我实际上将效果添加到 div 和 span 但我只希望 div 在它是最年轻的元素时被触发悬停。当一个较年轻的元素像 div 中的 span 一样悬停时，只有 span 被触发。上面的代码是一个插件，我这样调用它:#("*").doBorders()

Answer 1

我认为这只是您的选择器选择容器的问题。

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

像这样:

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

更新:鉴于您的更新，您可能想尝试从 child 清除 parent 边界的角度来看待它:

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