jquery“显示”效果显示错误元素

Question

我试着得到两个图标，“向上”和“向下”，当我悬停在它们上面时，它会变成更深的颜色。所以我又做了两个图标，"UpHover“和"DownHover"，它们从隐藏开始，分别在鼠标向上或向下显示，在鼠标保存时再次显示。Down正常工作，但由于某种原因，当我鼠标向上时，向上和向下都是隐藏的，同时显示了UpHover和DownHover。

当我删除行$(".UpHover").show(); (我把星号围绕它在下面)，效果停止，所以错误必须在这一行。但我不明白为什么这句话会与Down或DownHover有任何关系。我遗漏了什么？

<%= 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

更改图像的顺序，以便替换位于它所替换的图像旁边。

<%= 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"), '#' %>

现在发生的事情是，当你隐藏Up时，Down图像会向上移动以填充这个空间。因为这是鼠标所在的位置，所以$(".Down").mouseenter事件会触发，它也会被隐藏起来。

重新排序时，UpHover将填充Up位置。

Answer 2

正如其他人所建议的那样，只需使用CSS即可，因此您不需要任何JavaScript：

<%= 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

您应该使用CSS伪类:悬浮来完成这个任务，而不是使用javascript。

您可以定义一组特殊的样式，以便在元素有鼠标时使用。指定此样式的备用图像。