Geek asks and answers

Problem with mouse events with jquery

I created a menu and I tried using mouseover (mouseenter) and mouseout (mouseleave), but unfortunately, if you move the mouse too fast, some of these events do not fire, and the hover images do not return to the original image.

I need to use mouseover and mouseout events instead of hovering because I need to display the original image when I click on the image.

Please check the demo: Demo link

+3
source share
6 answers

I don’t think that using two different image elements on the icon is a good idea.

Single image element

src .

( ):

 $(".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");
 });

: DEMO

CSS

CSS . JavaScript , CSS:

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

: DEMO

+3

, onclick .

+1

- , , , , , , mouseout.

, , src CSS jQuery CSS hover.

http://jsfiddle.net/MATMD/

+1

css CSS- JavaScript .

, , JavaScript-. Markup, , :

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

+1

, .side_left_hover , .

, ? div.side_left/.side_left_hover. .

Fiddle: http://jsfiddle.net/rJK3R/1/

+1

jsFiddle demo

  • .on() .
  • You can attach an event handler (e)and check its 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');
    }
});
+1
source

More articles:


All Articles