Quick Tip – Set Hover Class for Anything

read 73 comments

Sometimes it's nice to be able to give users visual feedback when they hover their mouse over an element on the page. It's easy to do, of course, with a little CSS:

#hover-demo1 p:hover { background: #ff0; }

That little style rule changes the background of any paragraph that is a descendant of an element with id="hover-demo" to a nice bright yellow — but only when you hover your mouse over it. So, if that's all there is to it, what does this have to do with jQuery?

Unfortunately, (yep, you guessed it) Internet Explorer 6 and below don't support the :hover pseudo-class on any element except <a>. Bummer!

See for yourself here:

This is a paragraph. If you're using a modern browser, my background will be yellow when you hover over me.

Move your mouse over me! Move your mouse over me! I'll turn yellow, too! But not if you're using Internet Explorer 6 or below. :(

We could just leave it alone at this point and figure that people using real browsers will be rewarded with a little extra eye candy. On the other hand, maybe the right thing to do is to have mercy on the downtrodden. After all, even IE 6 users arguably have some aesthetic sense.

Enter jQuery

With a few lines of jQuery (one line, actually, if you don't care about making it readable) we can provide the hover effect to those using IE 6 or below, as long as they have JavaScript enabled. We also might as well keep the CSS rule in the stylesheet. Now, the only people who won't see the hover state change are those using Internet Explorer 6 (or below) with JavaScript off. Well, if they're using any browser with JavaScript and CSS turned off, they won't see it either. But that sort of folk ain't hankerin' for the eye candy anyway.

First, we give a simple class the same background as the aforementioned :hover pseudo-class:

.pretty-hover, #hover-demo1 p:hover {
  background: #ff0;
}

Next, we use jQuery to add class="pretty-hover" to each paragraph when the user hovers over it:

JavaScript:
  1. $('#hover-demo2 p').hover(function() {
  2.   $(this).addClass('pretty-hover');
  3. }, function() {
  4.   $(this).removeClass('pretty-hover');
  5. });

Note: We switched to a different id here so that IE 6 users can see the difference between the two hover demos, but the idea is that you would use the .hover() method on the same elements that you applied the :hover pseudo-class to.

That's it! Give it a whirl:

This is a paragraph. My background will be yellow when you hover over me — even if you're using Internet Explorer.

Move your mouse over me! Move your mouse over me! I'll turn yellow, too! Internet Explorer users welcome!

Try it with Firefox, Safari, or Internet Explorer. Try it with any browser you wish (within reason) — and you should see the yellow.

Bonus!

If you'd like to replicate the look of a hovered link, you can add another CSS declaration to the "pretty-hover" class:

.pretty-hover {
  background: #fee;
  cursor: pointer;
}

That'll work nicely for showing and hiding effects triggered by clicking on elements other than <a>.

comment feed

73 comments

  1. I am running Firefox 2.0.0.1 and neither box displays pink. Just displayed it in IE 7, there is a faint pink hue that I can see around the text if I lean in REAL close (I am 23 and have better than 20/20 vision with my contacts in...and they are in). Does not appear to be working in Opera 9.02 either.

  2. Just to clarify, first statement should read "...and text in neither box displays pink."

  3. Hi Matthew,
    That is really odd. I just tried it in Firefox 2.0.0.1 (both Windows and Mac) and the paragraphs for both boxes showed the highlight color when I hovered over them. Same in Safari 2.x. In IE 6, as expected, no background color behind each paragraph in the first box, but in the second box it showed up just fine.

    I just changed the background color to a bright yellow. Maybe the shade of pink was too subtle for your monitor. If you could refresh your browser and try again, that would be great.

  4. Isn't this one case where IE6 users can count themselves lucky - not to be troubled by awful paragraph hover effects?

  5. Ha! Yeah, I see what you mean, Chris. Surely, though, the principle can be put to much better (and less obnoxious) use than my example here — especially when attaching onclick events to elements other than <a>.

  6. Perfect! Yellow shows up nice and clear in FF now...and IE 7...and IE 5.5 SP 2...and IE 6. (IE 5.5 and IE 6 only work on second box, as expected).

    I guess it was just REALLY faint? Works like a charm now. Nice work and thanks for not taking my comments as harsh criticisms, just constructive inquiries ;-)

  7. Yeah, I was only joking. I'm actually using something a bit like this on one of the sites I look after, to help IE6 with nested submenus.

    I just really hate hover effects that have no particular purpose apart from drawing my attention to where I happen to have parked the mouse pointer.

  8. @Matthew: Phew! So glad that it's working for you now. Yeah, I guess it was really faint. I was trying to use a color that wasn't so garish, but the lesson I've learned is that for demos and tutorials, garish might be the best option. :)

    @Chris: You are a funny guy. I'm always entertained by your comments — so keep them coming!

  9. kenman

    Just testing... :) Live Comment Preview is pretty cool!

  10. jolex

    very nice. succinct and to the point - I like it

  11. Zsa

    I think your tutorials are really nice. They help me out a lot with a project I'm working on :) I especially liked those slide in slide out effects plus this hover tutorials would help me a a lot since I'm new to JQuery. Hope to see more tutorials for the less experienced like me!

  12. Yes ! they are really nice tutorials for me too !
    please write more.. more... more... thanks !

  13. Zsa and laocung, I'm thrilled to hear that you are enjoying the tutorials. Thanks for your words of encouragement. If there is anything in particular that you would like to learn about, let me know.

  14. If you want to make a whole block clickable (if it has a link inside), you can make it look like a link like this. Note: the firstChild... line may need to be changed. I hope this helps someone. $("li").click(function() {
    window.location = this.firstChild.firstChild.href;
    });
    $("li").hover(function() {
    $(this).addClass("hoveredbg");
    }, function() {
    $(this).removeClass("hoveredbg");
    });
    PS. I can't press enter in the comment box (FF 2.0 on WinXP)

  15. Thanks for the tip, Dave. Haven't had a chance to test it, but it looks interesting. I suppose the firstChild.firstChild.href part will depend on the markup within the li.

    Perhaps something like this would work:

    $('li').click(function() {
      window.location = $('a:first', this).attr('href');
    });
    

    I have no idea what might be causing the problem with the enter key. I tested on FF2 on WinXP, and it worked fine.

  16. kai

    i'm looking to create a hover that changes one class to another (or just changes the background and border properties). the classes are actual boxes with heights and widths (with links inside). Basically, I'd like to be able to add a hover to the whole class instead of just the link text. Is this what Dave is talking about? If so can you possibly elaborate on how to do this?

  17. yannis

    Just to clarify something about the ... pink discussion. You should specify your colours in full hexadecimal for modern browsers. Try putting the full hex in your style-sheet ie #ffff00 and it should work first time you can even put 'yellow' in the style-sheet!

  18. yannis, nobody had a problem seeing the yellow background (#ffff00). It was the pale pink that was causing the problem — not because it wasn't full hex, but because it was too pale. I always use shorthand (e.g. #ff0), and I live in modern browsers, but I've never had a problem with them. Is that what you're referring to, by the way? Full hex versus shorthand? If so, do you have a reference that I can look at (maybe from the W3C or something) that says to use full hex? This is news to me, so I'd like to read up on it.

  19. yannis

    karl, maybe I misunderstood the posts. My reference to colors being specified in full hex is to be able to specify a larger range of colors. From the W3C. The format of an RGB value in hexadecimal notation is a '#' immediately followed by either three or six hexadecimal characters. Both can be used in modern browsers, however it is preferable to use the full hex in order to capture tints and the like - what would short-hand be for #f9f9f9?. (The three digit notation gave us the web safe colours that we can now let to rest!).

  20. Remember those JavaScript snowflakes back in the day? It would be great to see a hover effect with snowflakes in a div. Or mousetrails.

    Ok. Really I'm just kidding...

  21. Marx

    Has anyone tested this using background images? It is not working for me. The code below will change the font color and the pointer, but not the bg image.

    #test {
         height:100px;
         width: 100px;
         background:url(../images/gov_title.gif);
    }
    .testhover{
         width:100px;
         height:100px;
         background:url(../images/gov_title_over.gif);
         color:#FF0000;
         cursor: pointer;
    }
  22. Hi Marx,

    Assuming that you are applying the "testhover" class directly to the element with an ID of "test," the problem is in the hierarchy of your CSS selectors. IDs get more weight than classes do. The color and cursor work because they haven't been defined as something else in the #test rule. If you have some kind of wrapper div with an id, you could put that in front of ".testhover" to make this work. So, you would define the class styles doing something like this:

    #wrapper .testhover {
         width:100px;
         height:100px;
         background:url(../images/gov_title_over.gif);
         color:#FF0000;
         cursor: pointer;
    }
  23. how can I catch mouseout event on Item, when I scrolled the page with mouse wheel or keyboard, but I didn't move mouse? In this case the browser doesn't call onmouseout event :(

  24. Hi, I don't really know anything about jQuery and am having trouble implementing this even in a simple example. Any chance of a point in the right direction? This is what I have:

    <head>
    <script>
        $('p').hover(function() {
          $(this).addClass('pretty-hover');
        }, function() {
          $(this).removeClass('pretty-hover');
        });
        </script>
        <style>
        	.pretty-hover {
    			color:red
    		}
        </style>
    </head>
    <body>
    	<p>Some text that I want to turn red</p>
    </body>

    Am I completely missing the point here or have I overlooked something really obvious? Any help will be greatly appreciated. Thanks.

  25. Hi Turhan,

    Since you're putting the script in the head of your document, it's trying to bind the hover function to the paragraph elements before they are registered in the DOM. So, effectively, it's attaching the function to nothing. You can avoid this problem by putting the script inside a window.onload, or better yet, inside jQuery's document.ready. Something like this:

    $(document).ready(function() {
        $('p').hover(function() {
          $(this).addClass('pretty-hover');
        }, function() {
          $(this).removeClass('pretty-hover');
        });
    });

    For more information, please see Introducing $(document).ready().

  26. D. Jones

    I am not sure if this works with background images. The div that this works on is a class.

    // JavaScript Document
    $(function() {
    // do something on document ready
    $('.thumbnailbgex').hover(function() {
    	$(this).addClass('thumbnailbg:hover');
    	}, function() {
    	$(this).removeClass('thumbnailbg:hover');
    	});
    });
  27. D. Jones: You can't set a :hover pseudo-class through JavaScript, nor do you need to. Just make sure in your stylesheet that .thumbnailbg comes after .thumbnailbgex, and preferably that it have a greater level of specificity (for example, if .thumbnailbgex is defined with the bare class, put something like "body " in front of .thumbnailbg, like so:

    .thumbnailbgex {background-color: #fff;}
    body .thumbnailbg {background-color: #foo;}
  28. D.Jones

    LOL. Ok I see what was doing wrong. I need to add another class in order for this to work. Doing that solved the problem.

  29. Hi Karl

    Thanks for that info. I have tried using the code you provided (with the document.ready bit) and moved it to inside the body tag of the document. That didn't work either, so I assume I'm still putting the code in the wrong place... When should I be putting this? Thanks very much.

  30. Hi Turhan,
    Do you have a URL that you can post here so that I can see what else might be going on with the code? That would be very helpful.

    Make sure you're referencing the jquery core file in a script tag before the code for the hover stuff. For example:

    <head>
    ...
    <script src="http://code.jquery.com/jquery-latest.min.js&quot; type="text/javascript"></script>
    <script type="text/javascript">
      $(document).ready(function() {
        $('#hover-demo2 p').hover(function() {
          $(this).addClass('pretty-hover');
        }, function() {
          $(this).removeClass('pretty-hover');
        });
      });
    </script>
    ...
    </head>

    And make sure that you have defined the ".pretty-hover" style in your stylesheet.

    Hope that helps.

  31. Charles

    Great tutorial, love all the tutorials on the site. Just one question, is there a way to select every other div, or every even div. I know how to do it with tables,

    ex $("table tr:nth-child(even)").addClass("toggle");

    Tried

    $("div.products div:nth-child(even)").addClass("toggle");

    but for some reason won't work, any ideas

  32. Hi Charles,
    Thanks for the compliments. :)

    The problem probably has to do with how those divs are nested. Are all of the divs within the same div.products? Or are they in separate ones? If you could point me to a page or show me an HTML snippet, I'll be able to help.

  33. This tutorial was on point and I was able to successfully implement this after a bit of time. I'm not a programmer at all and I'm finding jQuery easier to handle with simple things like this. Thanks so much Karl.

  34. dan

    awesome tutorial. this is exactly what I was looking for to ensure that each paragraph on my wordpress site gets highlighted when the mouse hovers over.

    required adding the script tag to the header.php of my theme and thats it

  35. Great tutorial, thanks a lot.

    I've used Java a lot, and found it to be fairly straight-forward. Javascript on the other hand.... Resources like your webpage have helped me create some pretty fun things that I wouldn't have bothered attempting otherwise.

    Keep it up!

  36. I thought hover would solve my problem but it doesn't seem to. I have an overlay that I want to display if I hover over the image. What happens is if I try anything other than hide/show the effect repeats.

    Hover and slideUp gives me the overlay sliding up, sliding down, sliding up, and so on. This is what happened when using mouseover, mouseout and based on the description for hover would solve that.

    my code

    $('#widescreen_box').hover(
    function () {
    $('#overlay').slideUp('slow');
    },
    function () {
    $('#overlay').slideDown('slow');
    }
    );

  37. Slava

    Phil, thank you! You saved a lot of my time. I had the same problem but didn`t manage to cope with it. Your solution works great!

  38. Jeronemo

    Hi there,

    This is a great tutorial. But for some reason i can't get it to worl. I tested it with
    Firebug and i can see the class="pretty-hover" is not added to the p element. So i guess it's the javascript. I read this tutorial for about 20 times. Did i miss something?

    Here's my code:

    Test

    $('#hover-demo1 p').hover(function() {
    $(this).addClass('pretty-hover');
    }, function() {
    $(this).removeClass('pretty-hover');
    });

    .pretty-hover, #hover-demo1 p:hover {
    background: #ff0;
    }

    My car has four weels!

    Thanks alot in advantage!

  39. Jeronemo

    ehh that did not go as planned. Heres a link to my website.

    Thanks!

  40. Hi Jeronemo,

    I think the only problem your script has is that it isn't wrapped in a document ready function. Try it this way instead:

    $(document).ready(function() {
      $('#hover-demo1 p').hover(function() {
        $(this).addClass('pretty-hover');
      }, function() {
        $(this).removeClass('pretty-hover');
      });
    });

    See Introducing document ready for details.

  41. Jeronemo

    Yeah, that's it! So that's why other jquery things didnt work either. Thanks alot ^^

  42. Jeronemo

    I have one question remaining. I wondered if this works with a form button. I would like the form button to hover in IE. I tried to replace the p element by button but it doenst work?! I also tried to replace it by a class.. same result. Any idea?

  43. Richard

    I'm designing a site for a client's intranet and it works for every browser, except IE6 (with and without CDATA). Javascript is completely enabled for this site in IE, but the hover will just not work. Anyone have a tip?

    Here's what I have in my head tag:

    
    <script src="js/jquery.js"></script>
    <script>
    //<![CDATA[
    $(document).ready(function() {
    $('.menu li').hover(function() {
    $(this).addClass('yellow-hover');
    }, function() {
    $(this).removeClass('yellow-hover');
    });
    });
    //]]>
    </script>
    <style type="text/css">
    .yellow-hover, .menu li:hover {background: #ffc;}
    </style>
    
  44. Hi Richard,
    It's really, really hard to guess what the problem is without seeing the page. Could be a problem with CSS specificity, but who knows? Can you provide a link?

    thanks.

  45. Richard

    Hi Karl,

    Unfortunately no, it's on an intranet site. It's driving me nuts, as it works in every browser that I've tried, except IE6; Chrome, FF 2&3, Opera, etc, all work as expected. I think I'm going to try some other, non-hover javascript stuff to see if it works, and if I figure it out, I'll post it here.

  46. Hi all,

    I am having some problem with HOVER event. It doesn't work correctly. Here is the code:

    JS:
    $j('.big_button').hover(
    function() {
    $(this).addClass("big_button_hover");
    },
    function() {
    $(this).removeClass("big_button_hover");
    }
    );
    CSS:
    .big_button {
    border-top:solid 1px #ddd;
    border-left:solid 1px #ddd;
    font-size:1.125em;
    color:#444;
    background-color:#CCCCCC;
    cursor:pointer;
    font-weight:bold;
    height:30px;
    overflow:visible;
    border-right:solid 1px #999999;
    border-bottom:solid 1px #999999;
    text-shadow:#719e03 1px 1px;
    padding-left:5px;
    padding-right:5px;
    width:auto;
    }
    .big_button_hover {
    border-top:solid 1px #999999;
    border-left:solid 1px #999999;
    border-right:solid 1px #999999;
    border-bottom:solid 1px #999999;
    font-size:1.125em;
    color:#fff;
    background-color:#CCCCCC;
    cursor:pointer;
    font-weight:bold;
    height:30px;
    overflow:visible;
    text-shadow:#719e03 1px 1px;
    padding-left:5px;
    padding-right:5px;
    width:auto;
    }
    HTML:

    Could anyone help me to solve out this problem?

    Many thanks

  47. Richard and Vietnam...,

    Please take a look at the demo page I put up here: http://test.kswedberg/hover.html
    It has both of your examples, and they're both working fine in IE6. Also, you should both test your scripts using Firefox with the Firebug extension (and enable the Console) to see if your page is reporting any JavaScript errors.

    Richard, the problem could be elsewhere -- maybe with a JavaScript error or something. I'd recommend removing .menu li:hover from the style rule and see if it still works in other browsers. As it is, the other browsers could be styling those li elements purely with CSS.

    Vietnam..., one possible issue I see is that you're using $j() in one place and $() in the others. Something to look into.

  48. this is awesome, great job, thx

  49. Hi Karl,

    A super-huge thanks. I've had a killer of a time solving an issue related to Suckerfish and Joomla. This came to my rescue. I knew that the power of jQuery, properly applied, could do it.

    Thanks again, I'm off to buy your book.

    Best,

    Matt

  50. this code is in jquery document
    $('#hover-demo').hover(function() {
    $(this).addClass('pretty-hover');
    }, function() {
    $(this).removeClass('pretty-hover');
    });

    this is how I call it

    <
    div id="leftPan" >

    It Dosent' work in ie 6 only i want to apply for div not in

    below is
    Call Us

    .pretty-hover, #leftPan:hover { background: #f1f8fa; }
    #leftPan{margin:0px 1px 0px 0px; padding:0px; width:25%; float:left; border-right:solid 1px #CCCCCC; height:189px;}

    • You probably need to change $('#hover-demo') to $('#leftPan'). Of course, you always need to make sure that you're selecting the correct elements to apply the behaviors.

      • Padma

        Hi I have kept the full code in the below comment I changed the code as you said still dosent' work in ie6. thanks in advance

      • Again, you're setting the .hover() event to the #hover-demo, but you don't have an element with an id of "hover-demo". Change "#hover-demo" to "#leftPan"

      • Padma

        its still not working only in ie6 though

      • If it's working here, but not on your page, it's going to be nearly impossible to help you unless I see your page.

      • padma

        <%@ Page Language="C#" AutoEventWireup="true" CodeFile="minwidth.aspx.cs" Inherits="minwidth" %>

        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

        <html xmlns="http://www.w3.org/1999/xhtml">
        <head runat="server">

        <style type="text/css">
        .pretty-hover, #hover-demo2 p:hover {
        background: #fff000;
        }
        </style>

        <script src="assets_client/scripts/jqueryglobal.js"></script>
        <title></title>
        </head>
        <body>
        <form id="form1" runat="server">
        <div id="hover-demo2">
        <p>This is a paragraph. My background will be yellow when you hover over me — even if you're using Internet Explorer.</p>
        <p>Move your mouse over me! Move your mouse over me! I'll turn yellow, too! Internet Explorer users welcome!</p>
        </div>
        </form>
        </body>
        </html>

        I have my Page code here and I use exactly your Jquery Please let me know if I missed anything.. This code dosent' work in my ie6

      • What is included in assets_client/scripts/jqueryglobal.js? Does it have the core jQuery file in it, as well as your custom script? If not, you need to reference the core jquery.js before your custom script.

        Is IE6 reporting a JavaScript error?

      • padma

        $('#hover-demo2 p').hover(function() {
        $(this).addClass('pretty-hover');
        }, function() {
        $(this).removeClass('pretty-hover');
        });

        My jquery code file has only this nothing other than that. No the mouseover color change dosent' work there is no javascript error.

      • If that's all you're including, then you must be getting an error.

        Sorry, I guess the article isn't explicit enough. Include the jQuery core file first:

        
        <head>
        <!-- other stuff -->
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
        <script src="assets_client/scripts/jqueryglobal.js"> </script>
        <!-- other stuff -->
        </head>
        

        In your jqueryglobal.js file, wrap your script in a document ready block:

        $(document).ready(function() {
          $('#hover-demo').hover(function() {
            $(this).addClass('pretty-hover');
          }, function() {
            $(this).removeClass('pretty-hover');
          });
        });
        

        For more information, see Introducing $(document).ready().

      • padma

        Thank You for all the help It works fine

  51. padma

    .pretty-hover, #leftPan:hover { background: #f1f8fa; }

    #leftPan{margin:0px 1px 0px 0px; padding:0px; width:25%; float:left; border-right:solid 1px #CCCCCC; height:189px;}

    ABOVE IS THE CSS CLASS

    THIS JQUERY IS IN OTHER FILE
    $('#hover-demo').hover(function() {
    $(this).addClass('pretty-hover');
    }, function() {
    $(this).removeClass('pretty-hover');
    });

    WHICH I CALLED HERE

    <script src="assets_client/scripts/jqueryglobal.js"> </script>

    AND APPLIED HERE IN DIV

    <div id="leftPan" >
    <div class="bold">
    <p>
    The code you gave works in allbroswers except ie6 I want to apply for the div not for the paragraph
    </p>
    </div>
    <br />

    </div>

  52. Mr JQ

    Great piece of code!!

    Your example shows how to set for specific object.. How would I set for all #selector li tags of an unordered list without specifying an ID for every li.. Thanks in advance..

    • Actually, the example shows how to set it for all p tags within #hover-demo2. To apply it to all list items with an unordered list that has an id of "selector," you would do it like this:

      $('#selector li').hover(function() {
        $(this).addClass('pretty-hover');
      }, function() {
        $(this).removeClass('pretty-hover');
      });
      

      Or, for all list items within any unordered list:

      $('ul li').hover(function() {
        $(this).addClass('pretty-hover');
      }, function() {
        $(this).removeClass('pretty-hover');
      });
      
  53. I really need your help or someone's help.

    this is what im trying to do to ..

    look at this link firefox or safari.
    http://www.chohoh.com/pcs/hover.example.html

    I need everything to look and function the way this does but it doesn't work in IE6
    I used the suckerfish :hover for this and it just doesn't work properly with nested lists.

    this is now what im trying to do with jquery.
    http://www.chohoh.com/pcs/hoverthing.html

    i thought it would be nest to shift gears but now I'm totally stuck on this and can't figure out why my hover isn't working.

    if i can just get this to work with jquery and have it work in ie6 it's smooth sailing. but im in a real bind at the moment. i've been working on this for 4 days now!

    any help, advice is appreciated !!!
    hope to hear from someone soon

    -lb

  54. TomB

    I want to set the hover class for a thumbnail but also for some subject related text in a ul on the same page. When you hover on the thumbnail a simultaneous class change occurs for both the thumbnail and a particular line of text within the ul. Can you direct me to a source to see how this can be done?

  55. You can find a similar implementation of this solution at http://blog.delivi.com/javascript/updated-hover-for-non-anchor-elements-in-ie6/

    This solution is much more optimized and is targeted only at IE 6, so that it doesn't affect the performance for users with modern web browsers.

  56. Matthias

    Has anyone ever tried this with typo3?

    I don´t know why, but i cannot get this code to work on my typo3-website.
    simple html file works great, even on the webserver. As soon as i try to run it on my typo3 installation, it just doesn´t add the class.

  57. Brandon Brown

    Hey there. I'm new to jQuery and I am trying to do a simple little trick that I can't seem to figure out. I want the background color to change (CHECK!) that works. But I also want the text to change as well but (FAIL!) it won't. I've tried everything I could come up with and am out of ideas, but I hate to give up. Does anyone have a solution to this? If you do please email me at bmxchamp4@gmail.com

    • It's just a matter of making your CSS selector specific enough in the actual stylesheet and setting the color property as well as the background-color property.

  58. Was just having a look around at how to resolve this :hover issue (I've not had too many IE6 related issues to sort out lately) and this is a nice, quick, easy to follow solution.

    Many Thanks.

    Chris.

  59. Hi, I have work for a complete solution which just bring the :hover support for ie6 like any other browser. It's a jQuery plugin (less than 1.6kb).

    You don't have to change your css code, just loading the plugin...
    http://plugins.jquery.com/project/ie6hover

  60. Kars

    Testing live comment. I've tried this and both the .hover function provided on the site of JQuery. Both were not working for me when adding+removing a class. Any known reason why?

9 Pings

  1. [...] Otra solución, es utilizar el evento .hover y añadir o quitar una clase: $('ul.list-links a').hover(function() { $(this).addClass('class-hover'); }, function() { $(this).removeClass('class-hover'); }); [...]

  2. [...] in WordPress zit, besef ik nu pas, al schrijvende. Misschien Suckerfish er toch terug uit en de jQuery-oplossing in de plaats, één dezer [...]

  3. [...] timers and elements 51+ Best of jQuery Tutorials and Examples jQuery Tips and Tricks II Quick Tip – Set Hover Class for Anything jQuery DIV click, with anchors JQuery HowTo 30 Javascript Menu Plugins and Scripts Improve your [...]

  4. [...] hesitate to let me know. For those concerned with this technique working on IE6, you can use some jQuery tricks to get around the hover [...]

  5. [...] hesitate to let me know. For those concerned with this technique working on IE6, you can use some jQuery tricks to get around the hover [...]

  6. [...] hesitate to let me know. For those concerned with this technique working on IE6, you can use some jQuery tricks to get around the hover issue. Esta entrada foi publicada em CSS. Adicione o link permanente aos [...]

  7. [...] hesitate to let me know. For those concerned with this technique working on IE6, you can use some jQuery tricks to get around the hover [...]

  8. [...] hesitate to let me know. For those concerned with this technique working on IE6, you can use some jQuery tricks to get around the hover [...]

Sorry, but comments for this entry are now closed.