CODEWITHSUNDEEP
javascriptmouseeventjquery
glarkou
glarkou

Reputation: 7101

Mouse events issue with jquery

I created a menu and I tried to use mouseover (mouseenter) and mouseout(mouseleave) but unfortunately if you move the mouse too fast some of the events are not fired and the hover images are not changed back to the original image.

I need to use mouseover and mouseout events instead of hover because I need to display the original image if the image is clicked.

Please check the demo at: Demo link

Upvotes: 3

Views: 354

Answers (6)

Roko C. Buljan
Roko C. Buljan

Reputation: 206078

jsFiddle demo

  • I used the .on() method and list the mouse events needed.
  • You can than attach an event handler (e) and check for it's type inside the function.

.

$('img.side_left').parent('div').on('mouseenter mouseleave click', function(e){
    if(e.type === 'mouseenter' || e.type==='mouseleave'){
        $(this).find('img:not(.active)').toggle();
    }else{ // IS CLICK
        $('img.active').toggle().removeClass('active');                
        $(this).find('img').addClass('active');
    }
});

Upvotes: 1

Alp
Alp

Reputation: 29739

I don't think that using two different image elements per icon is a good idea.

Single image element

You should use one element per icon and switch the class and image src when mouseover and mouseout are fired.

Like so (minimal example):

 $(".side_left").mouseover(function() {
    $(this).prop("src", "http://www.spiritualawakeningradio.com/yaha.jpg");
 }).mouseout(function(){
    $(this).prop("src", "http://img.creativemark.co.uk/uploads/images/461/13461/smallImg.png");
 });

Working fiddle: DEMO

Update with CSS sprites

Here is a better example with CSS sprites. No need for JavaScript and most of the markup, only some CSS:

.side_left {
    width: 60px;
    height: 60px;
    background: url('http://i.imm.io/mvRL.png');
}
.side_left:hover {
    background-position: 60px;
}

Working fiddle: DEMO

Upvotes: 3

Theron Luhn
Theron Luhn

Reputation: 4082

If you move the mouse to quickly, you're not giving the .side_left_hover element enough time to start listening to the mouse.

So how do you fix it? I would put all your mouse listeners in the .side_left/.side_left_hover container div. That will also make your code simpler and cleaner.

Here's the Fiddle: http://jsfiddle.net/rJK3R/1/

Upvotes: 1

GNi33
GNi33

Reputation: 4509

You could just use css and adding css-classes per JavaScript to do this.

I updated your fiddle to show you, this would reduce the needed JavaScript-Code significantly. I kept your existing Markup, though I think this could be done with less markup too:

http://jsfiddle.net/3YBe4/12/

Upvotes: 1

moribvndvs
moribvndvs

Reputation: 42497

This is happening because you are using mouse events on items that become hidden, so when you move fast enough the item isn't there to trigger the mouseout event.

I slightly modified your original code to make it work, however, you should consider scrapping the two image tags and swap between two image src attribute values or CSS using jQuery, or use pure CSS and the :hover selector.

http://jsfiddle.net/MATMD/

Upvotes: 1

davids
davids

Reputation: 5577

You could try using hover for the initial change, then onclick change the class or image source.

Upvotes: 1

Related Questions