jquery “show” effect shows wrong element

Question

I'm trying to get two icons, "Up" and "Down", to turn a darker color when I hover over them. So I made two more icons, "UpHover" and "DownHover", which start out hidden, and are respectively shown when I mouseenter Up or Down, and hidden again when I mouseleave them. Down works normally, but for some reason, when I mouseenter Up, both Up and Down are hidden, and both UpHover and DownHover are shown.

When I erase the line $(".UpHover").show(); (I put asterisks around it below) the effect stops, so the error must be in that line. But I can't for the life of me figure out why that line would have anything to do with Down or DownHover. What am I missing?

<%= link_to image_tag("Up.png", class: "Up"), '#' %>
<%= link_to image_tag("Down.png", class: "Down"), '#' %>
<%= link_to image_tag("UpHover.png", class: "UpHover"), '#' %>
<%= link_to image_tag("DownHover.png", class: "DownHover"), '#' %>
<script type="text/javascript">
  $(".UpHover").hide();
  $(".DownHover").hide();
  $(".Up").mouseenter(function () {
    $(".Up").hide();
    ***$(".UpHover").show();***
  });
  $(".UpHover").mouseleave(function () {
    $(".Up").show();
    $(".UpHover").hide();
  });
  $(".Down").mouseenter(function () {
    $(".Down").hide();
    $(".DownHover").show();
  });
  $(".DownHover").mouseleave(function () {
    $(".Down").show();
    $(".DownHover").hide();
  });
</script>

Answer 1

Change the order of the images so that the replacement is next to the image it replaces.

<%= link_to image_tag("Up.png", class: "Up"), '#' %>
<%= link_to image_tag("UpHover.png", class: "UpHover"), '#' %>
<%= link_to image_tag("Down.png", class: "Down"), '#' %>
<%= link_to image_tag("DownHover.png", class: "DownHover"), '#' %>

What's happening is that when you hide Up , the Down image move up to fill in that space. Since that's where the mouse is, the $(".Down").mouseenter event fires, and it gets hidden as well.

When you reorder it, UpHover fills in the Up place.

Answer 2

As others have suggested, just use CSS, and you won't need any JavaScript for this:

<%= link_to "#", class: "Up" %>
<%= link_to "#", class: "Down" %>

.Up, .Down
{
    display: inline-block;
    height: /* height of image */;
    width: /* width of image */;
}

.Up
{
    background-image: url(Up.png);
}

.Down
{
    background-image: url(Down.png);
}

.Up:hover
{
    background-image: url(UpHover.png);
}

.Down:hover
{
    background-image: url(DownHover.png);
}

Answer 3

You should use the CSS pseudo class :hover to do this, not javascript.

You can define a special set of styles for when the element has a mousover. Specify the alternate image for this style.

Answer 4

Better to change the background-position or change the class on hovering like,

$('.Up').hover(function(){
    $(this).addClass('active');
}, function(){
    $(this).removeClass('active');
});