Multiple events detected where should only be one

Vote count:

0

I have an indicator element that should disappear when I hover it, and replacement should appear on same place.

Now when I leave this replacement, it should now disappear, and old indicator should take it's place again.

Here is a HTML for indicators or triggers:

<div class="help-trigger for-desktop">
    <div class="bg">
        <h4>HELP ME<i class="icon-double-angle-right"></i><i class="icon-double-angle-left"></i></h4>
    </div>
</div>
<div class="help-trigger for-mobile">
    <div class="bg">
    </div>
</div>

And here is jQuery code:

jQuery('.help-trigger.for-mobile').hover(function(){
    jQuery(this).stop( true, true ).hide();
    jQuery('.help-trigger.for-desktop').stop( true, true).show();
    jQuery('.help-trigger.for-desktop').mouseout(function(){
        jQuery(this).stop( true, true ).hide();
        jQuery('.help-trigger.for-mobile').stop( true, true ).show();
    });
});

This in general works, but it sort of flickers and it's unstable. Events get detected more than they should (in lack of better words) so I get too many changes even though I haven't left .for-desktop element

asked 2 mins ago

Vuk Stanković

3,808

Multiple events detected where should only be one