Jquery - Mouseover DIV = addClass

Question

i build this really simple script but i did not work.

Can somebody tell me where the bug is?

HTML

<div id="hello" style="border: 1px solid #000000; margin:10px; padding:5px;">Hello</div>
<div style="border: 1px solid #000000; margin:10px; padding:5px;">Word</div>
<div style="margin:10px; padding:5px;">Test</div>

JS

$(function()
{

    $('div').live('hover', function (event)
    {
             if (event.type == 'mouseover')
             {
               $(this).addClass('mark');
             }
             else
             {
               $(this).removeClass('mark');
             }
    });

});

http://www.jsfiddle.net/4pYth/4/

Thanks in advance!
Peter

score 3 · Accepted Answer · edited May 23 '17 at 11:48

3

I think you want to use two separate live events for this one.

$('div').live('mouseenter', function() {
  $(this).addClass('mark');
}).live('mouseleave', function() {
  $(this).removeClass('mark');
)};

Edit:

Here is a link for the differences between mouseenter and mouseover, just in case you are curious: What is the difference between the mouseover and mouseenter events?

edited May 23 '17 at 11:48

Community

1
1

answered Sep 21 '10 at 17:23

partkyle

1,458
1
15
25

2

I think your jsfiddle was using mootools and not jquery. http://www.jsfiddle.net/4pYth/12/ – partkyle Sep 21 '10 at 17:34

score 0 · Answer 2 · answered Sep 21 '10 at 17:36

hover is not an event.

Many of the event-related shortcut methods on jQuery objects are actual events: click, submit, etc. But hover is not, it's a separate shortcut method that registers a mouseenter and a mouseleave event.

live() can only accept events, so if you want to use hover-like code with it you'll need separate events, as in Kyle's example.

However, this will be a little bit slow because now jQuery has to monitor every mouse movement to see if it is happening to/from a div element. It may be faster to just use hover() to bind the mouseenter/leave events on divs currently in the page, without live-ness. If you do have dynamically-added div elements that would mean having to rebind when adding them to the document though.

Better: just use CSS hover. It's only IE6 where good old :hover fails; if you really need to provide nice hover effects to users of that browser (bah! they don't deserve it, the scoundrels!) then you can add fallback script for that browser only, eg.:

<style type="text/css">
    div:hover, div.hover { background: red; }
</style>

<!--[if lt IE 7]><body class="browser-ie6"><![endif]-->
<!--[if gte IE 7]><!--><body><!--<![endif]-->

<script type="text/javascript">
    if ($(document.body).hasClass('browser-ie6')) {
        $('div').live('mouseenter', function() {
            $(this).addClass('hover');
        }).live('mouseleave', function() {
            $(this).removeClass('hover');
        )};
    }
</script>

Just out of curiosity, why are you using this method for browser detection and no the jQuery $.browser checks? — partkyle, Sep 21 '10 at 17:42
As the jQuery source says, “Use of jQuery.browser is frowned upon”. It's a crude `navigator.userAgent` string search that can go wrong for *many* reasons, but especially in false positives for IE, since many other clients have had the string `msie` in their User-Agent strings at various points. Conditional comments are a *much* more accurate method when the browser you need to isolate is IE. They're not as good as feature-sniffing (`$.support` in jQuery), but you can't reasonably feature-sniff hover support. A class on the `body` also makes it easy to serve IE-only stylesheet rules. — bobince, Sep 21 '10 at 18:25

Jquery - Mouseover DIV = addClass

2 Answers2