mouseover（）mouseout（）jQuery add / removeClass问题 [英] mouseover() mouseout() jQuery add/removeClass problem

问题描述

我试图使用mouseover，mouseout，addClass和removeClass的组合创建一个简单的mouseover效果。基本上，当用户将鼠标悬停在一个元素上时，我想应用一个不同的边框（1px灰色虚线）。初始状态是1px solid white。我有一个类叫高亮，它只有border：1px broken gray。我想添加该类onmouseover，并删除onmouseout，但我无法得到我想要的效果，除非我在亮点类中使用！important。

解决方案

这听起来像是你的javascript工作正常，但它只是一个问题与你的CSS规则的特异性，这就是为什么！important 使它工作。

您只需要使突出显示的CSS规则比非突出显示的规则更具体。

  #someItem ul li {/ * Specificity = 102 * / 
 border-color：white; 
} 
 
 .highlight {/ * Specificity = 10  - 不够具体！ * / 
 border-color：gray; 
} 
 
 #someItem ul li.highlight {/ * Specificity = 112  - 这将工作* / 
 border-color：gray; 
} 
  

---

进一步说明：

假设HTML的相关部分如下所示：

  < div id =someItem> 
< ul> 
< li>项目1< / li> 
< li>项目2< / li> 
< li>项目3< / li> 
< / ul> 
< / div> 
  

且您拥有此CSS：

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

目前， ul 在 #someItem div 将有一个白色边框，没有类突出显示灰色。

通过任何方式（在jQuery中为悬停事件），您可以向其中一个项添加一个类：

  $（this）.addClass（'highlight'）; 
  

HTML现在看起来像这样：

 < div id =someItem> 
< ul> 
< li>项目1< / li> 
< li class =highlight>项目2< / li> 
< li>项目3< / li> 
< / ul> 
< / div> 
  

到目前为止，你的Javascript和HTML工作正常，但你没有看到灰色边框！问题是你的CSS。当浏览器尝试决定如何为元素设置样式时，它会查看定位到一个元素和这些选择器中定义的样式的所有不同选择器。如果有两个不同的选择器都定义了相同的样式（在我们的例子中，边框颜色是有争议的），那么它必须决定应用哪个样式和忽略哪个样式。它通过所谓的特异性来实现这一点，即，选择器是多么具体。如 HTML狗文章中所述，它通过为每个部分分配一个值你的选择器，以及得分最高的那个。要点是：

• 元素选择器（例如：ul，li，table
  
• 类选择器（例如：.highlight，.active，.menu）= 10分


• ，#mainContent）= 100分

还有一些规则，例如：关键字！important 和内联样式，但是这是大多数与此无关，呃...课程。你应该知道的唯一其他的事情是，如果两个选择器具有相同的特异性，那么在文件中稍后定义的选择器将获胜。

回到你的问题， CSS我们以前，我们可以看到为什么它还没有一个灰色边框：

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

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

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

要在评论中回答您的问题，更改您的任何JavaScript或HTML，以使此工作。如果你分解那个选择器，它的意思是：

找到id为someItem的元素，里面寻找一个ul元素，然后是具有类highlight的li元素。

...现在， code> .addClass（）调用之前， li 满足这些条件，因此边框应该变灰。 p>

I am trying to create a simple mouseover effect using a combination of mouseover, mouseout, addClass, and removeClass. Basically, when the user mouses over an element, I want to apply a different border (1px dashed gray). The initial state is "1px solid white". I have a class called "highlight" which simply has "border: 1px dashed gray" in it. I want to add that class onmouseover and remove it on onmouseout but I am unable to get the effect I want unless I use !important within the "highlight" class.

解决方案

It sounds as though you've got the javascript working fine as is, but it's just a problem with the specificity of your CSS rules, which is why !important makes it work.

You just have to make your highlighted css rules more specific than the non-highlighted rules.

#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;    
}

---

Edit with further explanation:
Let's say the relevant parts of your HTML look like this:

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

and you have this CSS:

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

Currently, all the list items in the ul in #someItem div will have a white border, and nothing has the class highlight so nothing's grey.

Through whatever means you want (in your case a hover event in jQuery), you add a class to one of the items:

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

The HTML will now look something like this:

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

So far, your Javascript and HTML are working fine, but you don't see a grey border! The problem is your CSS. When the browser is trying to decide how to style the element, it looks at all the different selectors which target an element and the styles defined in those selectors. If there are two different selectors both defining the same style (in our case, the border colour is contested), then it has to decide which style to apply and which to ignore. It does this by means of what is known as "Specificity" - that is, how specific a selector is. As outlined in the HTML Dog article, it does this by assigning a value to each part of your selector, and the one with the highest score wins. The points are:

• element selector (eg: "ul", "li", "table") = 1 point
• class selector (eg: ".highlight", ".active", ".menu") = 10 points
• id selector (eg: "#someItem", "#mainContent") = 100 points

There are some more rules, eg: the keyword !important and also inline styles, but that's mostly irrelevant for this, uhh... "lesson". The only other thing you should know is that if two selectors have the same specificity, then the one defined later in the file wins.

Going back to your problem, given the CSS we had before, we can see why it's still not got a grey border:

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

As mentioned earlier, the solution is to create a more specific selector:

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

And to answer your question in the comments, you don't need to change any of your javascript or HTML for this to work. If you break down that selector, what it's saying is:

Look for the element with id "someItem", inside that look for a ul element, and then an li element which has the class "highlight" on it.

...and now, given the simple .addClass() call that you made earlier, the li satisfies these conditions, so the border should turn grey.

这篇关于mouseover（）mouseout（）jQuery add / removeClass问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！