0

我有一个像这样的简单 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. 我搜索了很多，但无法解决这个问题

附言。我添加了我想要实现的图像： 图像链接

4

3 回答 3

0

只需使用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将是 mouseentered/mousleft DOM 元素。

于 2013-10-24T19:35:58.430 回答
0

是否要更改输入的 div (.left-menu)？还是包含 div (.left-menu-top)？

在第一种情况下：

$(this).css....

第二种情况：

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

jquery .closest()

于 2013-10-24T19:43:54.257 回答
0

您想为输入的项目的父项添加边框吗？

$(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"了borderRadius原生 DOM 对象，因为它比解析字符串要快。您已经在使用基于对象的.css()方法，所以它只是一个微优化。

不过，您应该考虑的是，较旧的浏览器版本需要前缀，即 Firefox < 3.6 和 Safari < 4。这应该适用于所有可能的版本：

$(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 文件中，减少浏览器需要执行的处理量。

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

于 2013-10-24T19:41:11.987 回答