鼠标事件与jquery有关

Question

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

Answer 1

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

Answer 2

您可以尝试使用悬停进行初始更改，然后单击更改类或图像源。

Answer 3

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/

Answer 4

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/

Answer 5

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/

Answer 6

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