jQuery在鼠标输入时更改css，但仅输入内容而不是全部

jQuery change css when mouseenter but only entered content not all

本文关键字：输入 全部 鼠标 css jQuery      更新时间：2023-09-26

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

附言 .我添加了我想要实现的目标的图像：图片链接

只需使用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将是穆斯切德/穆斯左 DOM 元素。

你想改变输入的div（.left-menu）？还是包含的div（.left-menu-top）？

在第一种情况下： 

$(this).css....

第二种情况：

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

jquery .closest（）

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

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

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

相关文章：