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);
       });

我用它来为当前悬停的元素添加边框.然而,例如,如果a span在其中,则div它们都在获得边界.我只想瞄准目标span.我认为添加event.stopPropagation()可以解决问题(这是我在Flex中所做的,这是我比较习惯的)但我想这是一个直播事件,我甚至不明白这意味着什么.那么基本上如何在不触发父母的情况下瞄准最年轻的元素呢？

谢谢!!

更新

更多信息.我试图将此效果添加到每个元素.所以我实际上将效果添加到了div和span但是我只希望div在它是最新的元素时被触发.当一个年轻的元素像一个span内在的徘徊时,div只有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);
        }
    );

更新: 鉴于您的更新,您可能希望尝试从清除父项边框的子项的角度进行更新:

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