Question

我有一个像这样简单的jQuery：

    $(function () {
        $('.left-menu').mouseenter(function () {
            $('.left-menu-top').css({
                "border-radius": "0px 25px 0px 0px"
            })

        });
        $('.left-menu').mouseleave(function () {

            $('.left-menu-top').css({
                "border-radius": "25px 0px 0px 0px"
            })
        });
    });

和HTML：

<div class="left-menu-total">
   <div class="left-menu"></div>
   <div class="left-menu-top">
      Title
   </div>
   <div class="left-menu"></div>
   <div class="left-menu"></div>
</div>

我想仅更改输入的div的样式，而不是每个div。我搜索了很多，但无法解决这个问题

PS。我添加了一个我想要实现的图像： image link

Answer 1

只需使用this

即可

$('.left-menu').mouseenter(function () {

    $(this).css({"border-radius":"0px 25px 0px 0px"})

});
$('.left-menu').mouseleave(function () {

    $(this).css({"border-radius":"25px 0px 0px 0px"})

});

this将是mousentered / mousleft DOM元素。

Answer 2

您想为输入项目的父级提供边框吗？

$(function(){
    $('.left-menu').on({
        mouseenter:function(){
            $(this).parent().css({borderRadius:'0px 25px 0px 0px'});
        },
        mouseleave:function(){
            $(this).parent().css({borderRadius:'25px 0px 0px 0px'});
        }
    });
});

您可以将绑定合并为单个.on()绑定（减少DOM查询是提高jQuery性能的最佳方法），然后只影响输入项的父级（使用this表示输入的特定元素）。我还将"border-radius"更改为本地DOM对象borderRadius，因为它比需要解析字符串更快。您已经在使用基于对象的.css()方法，因此它只是一个微优化。

但是，您应该考虑的一点是旧的浏览器版本需要前缀，即Firefox＆lt; 3.6和Safari＆lt;这应该包含所有可能的版本：

$(function(){
    function setBorderRadius($this,radVal){
        $this.parent().css({
            borderRadius:radVal,
            WebkitBorderRadius:radVal,
            MozBorderRadius:radVal
        });
    }

    $('.left-menu').on({
        mouseenter:function(){
            setBorderRadius($(this),'0px 25px 0px 0px');
        },
        mouseleave:function(){
            setBorderRadius($(this),'25px 0px 0px 0px');
        }
    });
});

注意使用函数。这将涵盖CSS的所有基础，但也使逻辑更加可扩展。现在，如果您将来需要影响某些事物的border-radius，您只需将新项目输入到该函数中即可。

更好的方法是为每个人创建一个新的CSS类：

.MouseEnter {
    border-radius-to:0 25px 0 0;
    -webkit-border-radius:0 25px 0 0;
    -moz-border-radius:0 25px 0 0;
}

.MouseLeave {
    border-radius:25px 0 0 0;
    -webkit-border-radius:25px 0 0 0;
    -moz-border-radius:25px 0 0 0;
}

然后只需更改鼠标输入/离开的类：

$(function(){
    $('.left-menu').on({
        mouseenter:function(){
            $(this).parent().addClass('MouseEnter').removeClass('MouseLeave');
        },
        mouseleave:function(){
            $(this).parent().addClass('MouseLeave').removeClass('MouseEnter');
        }
    });
});

这适当地将CSS负担放在CSS文件中，JS文件中的JS负担，并减少了浏览器需要执行的处理量。

不要试图让信息过载，只提供选项。

Answer 3

您要更改输入的div（.left菜单）吗？或包含div（.left-menu-top）？

在第一种情况下：

$(this).css....

第二种情况：

$(this).closest('.left-menu-top').css(...

jquery .closest()

jQuery在mouseenter时更改css但仅输入内容并非全部

3 个答案: