mouseover()mouseout()jQuery add/removeClass问题

Question

我试图使用mouseover,mouseout,addClass和removeClass的组合创建一个简单的鼠标悬停效果.基本上,当用户将鼠标悬停在元素上时,我想应用不同的边框(1px灰色虚线).初始状态是"1px纯白色".我有一个名为"突出显示"的类,其中只有"border:1px dashed grey".我想添加该类onmouseover并在onmouseout上删除它但我无法获得我想要的效果,除非我在"突出显示"类中使用!important.

Answer 1

听起来好像你的javascript工作正常,但这只是你的CSS规则的特殊性问题,这就是为什么!important它的工作原理.

您只需使突出显示的css规则比非突出显示的规则更具体.

#someItem ul li { /* Specificity = 102 */
    border-color: white;
}

.highlight { /* Specificity = 10 -- not specific enough! */
    border-color: grey;    
}

#someItem ul li.highlight { /* Specificity = 112 -- this will work */
    border-color: grey;    
}

编辑并进一步说明:
假设HTML的相关部分如下所示:

<div id="someItem">
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
</div>

你有这个CSS:

#someItem ul li {
    border: 1px solid white;
}
.highlight {
    border-color: grey;
}

目前,在所有的列表项ul中#someItem div会产生白色边框,并且无阶级highlight所以没什么的灰色.

通过您想要的任何方式(在您的情况下是jQuery中的悬停事件),您可以向其中一个项添加一个类:

$(this).addClass('highlight'); 

HTML现在看起来像这样:

<div id="someItem">
    <ul>
        <li>Item 1</li>
        <li class="highlight">Item 2</li>
        <li>Item 3</li>
    </ul>
</div>

到目前为止,您的Javascript和HTML工作正常,但您没有看到灰色边框!问题是你的CSS.当浏览器试图决定如何设置元素样式时,它会查看所有不同的选择器,这些选择器以元素和这些选择器中定义的样式为目标.如果有两个不同的选择器都定义相同的样式(在我们的例子中,边框颜色是有争议的),那么它必须决定应用哪种样式以及忽略哪种样式.它通过所谓的"特异性"来实现这一点 - 即选择器的具体程度.正如HTML Dog文章中所述,它通过为选择器的每个部分分配一个值来实现这一点,并且得分最高的那个获胜.要点是:

• 元素选择器(例如:"ul","li","table")= 1分
• 类选择器(例如:".highlight",".active",".menu")= 10分
• id选择器(例如:"#someItem","#mainContent")= 100分

还有一些规则,例如:关键字!important和内联样式,但这与此无关,呃......"教训".您应该知道的另一件事是,如果两个选择器具有相同的特异性,那么文件中稍后定义的选择器将获胜.

回到你的问题,鉴于我们以前的CSS,我们可以看到为什么它仍然没有灰色边框:

#someItem ul li = id + element + element = 100 + 1 + 1 = 102 points
.highlight = class = 10 points

如前所述,解决方案是创建一个更具体的选择器:

#someItem ul li.highlight
   = id + element + element + class
   = 100 + 1 + 1 + 10
   = 112 points

要在评论中回答您的问题,您无需更改任何JavaScript或HTML即可.如果你打破那个选择器,它的含义是:

查找id为"someItem"的元素,在其中查找ul元素,然后查找具有"highlight"类的li元素.

...现在,考虑.addClass()到你之前做的简单调用,li满足这些条件,所以边框应该变成灰色.

Answer 2

从Jquery 1.3.3开始,你可以做得更简单一些.将有一个增强版的.toggleClass()可用,它将非常强大.

如果您不需要将其分解为函数,那么从1.3.3开始,您将能够简单地执行以下操作:

$(".myclass").hover(function(){ $(this).toggleClass('highlight'); });

如果您必须包含!important,那么您的突出显示类可能需要更具体(请参阅CSS特性).