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

Question

我试图让两个图标，“向上”和“向下”，当我将鼠标悬停在它们上方时，它们的颜色会变深。所以我又做了两个图标，“UpHover”和“DownHover”，它们一开始是隐藏的，当我鼠标进入向上或向下时分别显示，当我鼠标离开它们时再次隐藏。 Down正常工作，但是由于某种原因，当我鼠标进入Up时，Up和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 伪类 :hover 来执行此操作，而不是 javascript。

当元素有鼠标悬停时，您可以定义一组特殊的样式。指定此样式的备用图片。

Answer 4

最好更改背景位置或更改悬停类，

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