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

我试图得到两个图标，“向上”和“向下”，当我悬停在它们上面时，它们会变成更深的颜色。因此，我又制作了两个图标，“向上悬停”和“向下悬停”，这两个图标开始时是隐藏的，当我向上或向下移动鼠标时分别显示，当我删除它们时再次隐藏。Down正常工作，但由于某些原因，当我向上移动鼠标时，Up和Down都被隐藏，UpHover和DownHover都被显示

当我擦除行

$（“.UpHover”）.show（）时（我在下面加了星号）效果停止，所以错误一定在那一行。但我一辈子都搞不懂为什么这条线和向下或向下悬停有什么关系。我错过了什么

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


$（“.UpHover”）.hide（）；
$（“.downhaver”）.hide（）；
$（“.Up”）.mouseenter（函数（）{
$（“.Up”）.hide（）；
***$（“.UpHover”）.show（）***
});
$（“.UpHover”）.mouseleave（函数（）{
$（“.Up”）.show（）；
$（“.UpHover”）.hide（）；
});
$（“.Down”）.mouseenter（函数（）{
$（“.Down”）.hide（）；
$（“.downhaver”）.show（）；
});
$（“.downhave”）.mouseleave（函数（）{
$（“.Down”）.show（）；
$（“.downhaver”）.hide（）；
});
您应该使用CSS伪类：hover来完成此操作，而不是使用javascript

当元素具有鼠标悬停时，可以定义一组特殊样式。指定此样式的备用图像。
更改图像的顺序，使替换图像位于替换图像的旁边

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



发生的情况是，当您隐藏
向上
时，
向下
图像会向上移动以填充该空间。因为鼠标就在那里，
$（“.Down”）.mouseenter
事件触发，它也被隐藏

重新排序时，
UpHover
填充
Up
位置。
正如其他人所建议的，只需使用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);
}


.向上，.向下
{
显示：内联块；
高度：/*图像高度*/；
宽度：/*图像的宽度*/；
}
向上的
{
背景图片：url（Up.png）；
}
.下来
{
背景图片：url（Down.png）；
}
.向上：悬停
{
背景图片：url（UpHover.png）；
}
.向下：悬停
{
背景图片：url（downhaver.png）；
}
最好更改背景位置或悬停时的类

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

使用CSS不是更容易吗？使用CSS伪类可能可以更容易地解决这个问题：悬停尝试此链接进行快速介绍：当您向上隐藏
时，
向下移动到它的位置。所以鼠标进入
向下
，它就被隐藏了。拼写错误的
text/javascipt
。哇，我从来没有想过。谢谢，我会尽快接受你的回答！使用CSS有什么好处吗？@user3739453当然有。保持CSS中的样式和JavaScript中的样式是。所以你能做的越多越好。但是它能提高速度还是防止bug还是什么？它不能直接防止bug，但它通常能提高可读性、可重用性并降低代码复杂度。@user3739453在一定程度上减少了你需要的代码量，它有助于减少出错的可能性。使用CSS有什么好处吗？