mouseover（）mouseout（）jQuery add / removeClass问题

我试图使用mouseover，mouseout，addClass和removeClass的组合创建一个简单的鼠标hover效果。 基本上，当用户将鼠标hover在元素上时，我想应用不同的边框（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的相关部分如下所示：

 
 
 
Item 1
 
Item 2
 
Item 3
 
  

你有这个CSS：

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

目前， #someItem div ul中的所有列表项都将具有白色边框，并且没有任何类highlight因此没有灰色。

通过你想要的任何方式（在你的情况下是jQuery中的hover事件），你可以为其中一个项添加一个类：

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

HTML现在看起来像这样：

 
 
 
Item 1
 
Item 2
 
Item 3
 
  

到目前为止，您的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分
 .highlight = class = 10分

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

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

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

查找id为“someItem”的元素，在其中查找ul元素，然后查找具有“highlight”类的li元素。

…现在，鉴于您之前创建的简单.addClass()调用， li满足这些条件，因此边框.addClass()灰色。

Answer 2

从Jquery 1.3.3开始，你可以做到这一点。 将有一个增强版的.toggleClass（）可用，它将非常强大。

如果您不需要将其分解为函数，那么从1.3.3开始，您将能够简单地执行：

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

如果您必须包含！important，那么您的突出显示类可能需要更具体（请参阅CSS特性 ）。

Answer 3

我猜你在元素上使用内联样式作为初始样式：

  ...  
 ...  

这将覆盖使用类应用的样式…因此，不要使用内联样式，只需使用不同的初始类来应用初始样式：

  ... 
 ...  

Answer 4

这是我用过的hover的一个例子：

 $(".myclass").hover(jbhovershow,jbhoverhide); jbhovershow = function () { $(this).addClass("jimtest"); }; jbhoverhide = function () { $(this).removeClass("jimtest"); } 

你真的不必将这个简单的东西分解成单独的function。

我怀疑你的问题可能与css中存在冲突 – 尝试通过硬编码或点击来应用你的高亮类，看看它是否真的有效。

希望有所帮助

吉姆

Answer 5

你有没有考虑过纯粹的CSS方法？

例如：

 someClass { border: 1px solid white; } someClass:hover { border: 1px dashed gray; } 

hover伪类将为您提供所需的行为：当用户被鼠标hover在元素上时，它将使用较低的样式，否则它将使用第一种样式。

注意：有人评论说，这对IE中的非元素不起作用。 但它确实适用于Chrome，Firefox，Safari和Opera。

它也适用于IE8和IE7标准模式中的任何元素。 虽然我没有IE6进行测试。

Answer 6

CSS：

 div.target { border: 1px solid #000000; } div.target-hover { border-color: #ff0000; } 

JS：

 $("div.target").hover( function () { $(this).addClass("target-hover"); }, function () { $(this).removeClass("target-hover"); } ); 

我通常这样做。 （允许更多选项）

Answer 7

或者你可以使用简单的CSS来做到这一点：

 #namehere { border: 1px solid #fff; } #namehere:hover { border: 1px dashed #aaa }