mouseover() mouseout() jQuery add/removeClass problem

Question

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.

Corymb

BTW, Brian: since you're using jQuery, you may want to check out the hover event helper method: docs.jquery.com/Events/hover – Mcginley

Answer 1

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.

Toplofty

@nickf: I think you are on to something here. How could I use the addClass method then? I altered my specificity but now, how do I reference the class in jQuery in my context? – Corymb

I think your jQuery is fine, just using .addClass('highlight') and .removeClass('highlight') should be all you need to do, if your CSS is constructed properly. – Toplofty

Agreed. The most specific CSS rule will take precedence. If you set the base with "#ItemList ul li" then set the hover style with "#ItemList ul li.highlight" to guarantee higher specificity – Handy

@Cheekysoft: How can you specify #ItemList ul li.highlight while using the addClass/removeClass method in jQuery? – Corymb

like I said, you don't need to change your Javascript at all. I'll edit the answer to explain further. – Toplofty

Answer 2

From Jquery 1.3.3 you'll be able to do this a little simpler. There will be an enhanced version of .toggleClass() available which will be very powerful.

If you don't need to break this out into a function then from 1.3.3 you'll be able to simply do:

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

If you're having to include !important then your highlight class may need to be more specific (see CSS Specificity).

Exploiter

Answer 3

I'm guessing you're using an inline style on the element for the initial style:

<style type="text/css">
  .hover { border: 1px dashed gray; } /* will never apply */
</style>

...

<!-- this style has priority over class styles! -->
<div style="border: 1px solid white"> 
...
</div>

This will override the styles applied using a class... So instead of using inline styles, just use a different initial class to apply the initial styles:

<style type="text/css">
  .normal { border: 1px solid white; }
  .hover { border: 1px dashed gray; }
</style>

...

<div class="normal">
...
</div>

Mcginley

Good point. Just to clarify for the asker, using the css() method in jquery applies inline styles. – Artur

I'm not using inline styles. The original style is applied via a stylesheet with nothing applied via the tag or the css() method, yet adding another class via addClass() will NOT override a style rule already defined in the original style unless I use !important. – Corymb

Then make sure the rule for the original style is either less specific, or comes before the highlight style in the stylesheet. – Mcginley

Answer 4

Have you considered a pure css approach?

For example:

someClass {
    border: 1px solid white;
}

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

The hover pseudo class will give you the behavior that you want: when the user is moused over the element, it will use the lower style, otherwise it will use the first style.

Note: as someone commented, this doesn't work for non a elements in IE. It does however work for me in Chrome, Firefox, Safari, and Opera.

It also works for any element in IE8 and IE7 standards mode. I don't have IE6 to test with though.

Artur

This won't work in IE6, I believe. Only a elements can have hover in it. – Subedit

@Paolo Seems to work in every browser besides IE for any element type. – Artur

@Paolo seems like you said two things. First you said it won't work in IE6. Then you said hover only works on a elements. Sorry for my misunderstanding, but I thought you were saying it only works for a elements in any browser, and doesn't work at all in IE6. – Artur

when i said "can have hover in it" i meant it as in IE6 – Subedit

Answer 5

This is an example of a hover I have used:

$(".myclass").hover(jbhovershow,jbhoverhide);


jbhovershow = function () {
            $(this).addClass("jimtest");
          }; 

jbhoverhide = function () {
            $(this).removeClass("jimtest");
          }

you don't really have to break something this simple up into seperate functions.

I suspect your issue might be with a conflict in the css - try just applying your highlight class by hardcodeing it , or on a click and see if it is really working.

Hope that helps

Jim

Farleigh

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");
    }
);

i usually do it this way. (allows more options)

Deanndeanna

This is exactly what I am doing except in div.target-hover I have "border: 1px dashed gray". The border will not override the original unless I add !important for some reason. – Corymb

that's odd, how are you adding the first class to the element? – Deanndeanna

@Deanndeanna It's coming from a rule called "#ItemList ul li" which I have styled to have "border: 1px solid white". I have a class called "highlight" that simply has "border: 1px dashed gray" that I want to toggle. – Corymb

are you targeting it like this $("#ItemList ul li").hover – Deanndeanna

Answer 7

Or you can just do it with simple CSS by using:

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

Phase

Not sure that is a cross-browser solution (yet), but then again, I never said it had to be. – Corymb