分类导航

jQuery 发布时间：2022-04-19 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了jQuery：在悬停元素上添加边框但不是父母，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

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

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

谢谢！！

更新

更多信息.我试图将此效果添加到每个元素.所以我实际上将效果添加到div和span中,但我只希望div在被悬停的最年轻元素时被触发.当一个年轻的元素像div中的跨度一样盘旋时,只会触发跨度.上面的代码是一个插件,我这样称呼它：#(“*”).doBorders()

解决方法

我认为这只是你的选择器选择容器的问题.

如果可以,请确保第一个选择器正在选择孩子 – 您要操纵的孩子……

这样的事情：

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

如果你不能在那里选择孩子,那么你可以在函数中选择子项,如下所示：

$(".container").hover(
        function () {
            $(this).children(".childClass").css("border",function () {
            $(this).children(".childClass").css("border",originalBorder);
        }
    );

更新：
鉴于您的更新,您可能希望从清除父母边界的孩子的角度尝试进行更新：

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