I have a black icon which I would like to turn blue while the cursor is hovering over it. It does turn blue if I keep the cursor still, but if I move it around, the icon starts flickering blue and black. I made a jfiddle to illustrate:

/

And here's the code in my view:

<%= image_tag("IconBlack.png", class: "link", id: "icon-black") %>
<%= image_tag("IconBlue.png", class: "link", id: "icon-blue") %>
<script type="text/javascript">
  $('#icon-blue').hide();
  $('#icon-black').mouseenter(function () {
    $('#icon-black').hide();
    $('#icon-blue').show();
  });
  $('#icon-black').mouseleave(function () {
    $('#icon-black').show();
    $('#icon-blue').hide();
  });
</script>

Apparently this is a mon problem with mouseenter/leave considering the number of similar questions. This isn't a duplicate however, because I tried all the solutions that I found, and none of them fixed my particular problem. For example, I tried all different binations of mouseover/out/enter/leave/toggle/hover. How can I stop the flickering effect?

I have a black icon which I would like to turn blue while the cursor is hovering over it. It does turn blue if I keep the cursor still, but if I move it around, the icon starts flickering blue and black. I made a jfiddle to illustrate:

http://jsfiddle/8t2whdop/3/

And here's the code in my view:

<%= image_tag("IconBlack.png", class: "link", id: "icon-black") %>
<%= image_tag("IconBlue.png", class: "link", id: "icon-blue") %>
<script type="text/javascript">
  $('#icon-blue').hide();
  $('#icon-black').mouseenter(function () {
    $('#icon-black').hide();
    $('#icon-blue').show();
  });
  $('#icon-black').mouseleave(function () {
    $('#icon-black').show();
    $('#icon-blue').hide();
  });
</script>

Apparently this is a mon problem with mouseenter/leave considering the number of similar questions. This isn't a duplicate however, because I tried all the solutions that I found, and none of them fixed my particular problem. For example, I tried all different binations of mouseover/out/enter/leave/toggle/hover. How can I stop the flickering effect?

• javascript
• jquery
• hide
• show
• mouseover

Share Improve this question Follow edited Dec 26, 2014 at 18:02 Joe Morano asked Dec 26, 2014 at 17:54 Joe MoranoJoe Morano 1,8951010 gold badges5959 silver badges124124 bronze badges 3

• Is there a specific reason you need to do this with JavaScript as the same hover effect can be easily done using CSS? – Jay Commented Dec 26, 2014 at 17:59
• @Jay Can I switch images with CSS though? – Joe Morano Commented Dec 26, 2014 at 18:02
• @user3739453 You can easily switch background image – A. Wolff Commented Dec 26, 2014 at 18:02

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

by simply using the right selector $('#icon-blue').mouseleave demo

$('#icon-blue').hide();
$('#icon-black').mouseenter(function () {
  $('#icon-black').hide();
  $('#icon-blue').show();
});
$('#icon-blue').mouseleave(function () { // the #icon blue!!!
  $('#icon-black').show();
  $('#icon-blue').hide();
});

Also note that what you need can be done in pure CSS

In either cases it's easier to write JS and CSS for such things if you wrap your icons inside a mon parent element -- cause than, all you need is to target :hover or in jQ .hover() that parent.

First, you could do this with CSS only, no JS needed :

http://jsfiddle/8t2whdop/7/

HTML

<div id="icon">
</div>

CSS

#icon{
    height: 60px;
    width: 60px;
    background: black;
}
#icon:hover{
    background: blue;
}

Then I'll explain why your code is giving this result (expected):

When you hover the black icon, you call jQuery hide method on it which is setting display: none; on the black icon (after a few milliseconds) thus triggering the mouseleave event. So it instantly shows the black icon again which triggers the mouseenter event and so on...

If you wan't (or need) to do it with JS, you could use a wrapper div to catch events (but even so, using two different divs for each background is not efficient):

HTML

<div id="icon">
    <div id="icon-black"></div>
    <div id="icon-blue"></div>
</div>

JS

$('#icon-blue').hide();
$('#icon').mouseenter(function () {
  $('#icon-black').hide();
  $('#icon-blue').show();
});
$('#icon').mouseleave(function () {
  $('#icon-black').show();
  $('#icon-blue').hide();
});

See fiddle :

http://jsfiddle/8t2whdop/6/

I think this will be better solved using css, if you just want the color to be changed on hover

#icon{
    height: 60px;
    width: 60px;
    background-color: black;
}

#icon:hover{
    background-color: blue;
}

If you need to change the image of the box:

#icon{
    height: 60px;
    width: 60px;
    background-image: url("IconBlack.png");
}

#icon:hover{
    background-image: url("IconBlue.png");

}