JQuery addClass 失效原因

2021-02-07 11:02:26 阅读：472 来源： 互联网

标签：JQuery color li black background 失效 circle class addClass

在写css样式时候，为了限定子元素范围一般嵌套父层class，但会导致JQuery:addClass失效

因为嵌套父层class优先级大于普通class

例如

<style>
    .circle li {background-color:red}
    .changecolor {background-color:black}
    .circle .change {background-color:black}
</style>
<body>
    <div class="circle">
         <ul>
               <li>123</li>
         <ul>
    </div>
</body>

例如写一段JQuert通过鼠标经过改变li的背景颜色，通过直接用class元素覆盖之

$(".circle li").mouseenter(
{
    $(this).addClass("changecolor");
})

会发现覆盖失败，因为原来带父级的类优先级大于不带父级的类，一共有三种解决方法

第一：让覆盖元素写成带有父级的类

$(".circle li").mouseenter(
{
    $(this).addClass(".circle change");
})

第二：添加!important 将类设置成最高优先级

.changecolor {background-color:black !important}

第三: 通过JQuert.css方法改变元素的属性

$(".circle li").mouseenter(
{
    $(this).css("background","black");
})

标签：JQuery,color,li,black,background,失效,circle,class,addClass
来源： https://blog.csdn.net/RETURN100ERRORS/article/details/113737120

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

JQuery addClass 失效原因