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