jquery "show" 效果显示错误元素

Question

我正在尝试让 "Up" 和 "Down" 这两个图标在我将鼠标悬停在它们上方时变成更深的颜色。所以我又制作了两个图标，"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

您应该使用 CSS 伪 class :hover 来执行此操作，而不是 javascript。

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

Answer 2

更改图像的顺序，使替换图像紧挨着它替换的图像。

<%= 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 图像会向上移动以填充 space。由于那是鼠标所在的位置，$(".Down").mouseenter 事件会触发，它也会被隐藏。

重新排序时，UpHover 会填入 Up 位置。

Answer 3

正如其他人所建议的，只需使用 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 4

最好更改背景位置或在悬停时更改 class，

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

jquery "show" 效果显示错误元素

jquery "show" effect shows wrong element

javascript

jquery

show

hide

mouseenter