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

jquery "show" effect shows wrong element

本文关键字：显示 错误 元素 show jquery      更新时间：2023-09-26

我正在尝试获取两个图标"向上"和"向下"，当我将鼠标悬停在它们上时，它们的颜色变深。所以我又做了两个图标，"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>

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

<%= 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位置。

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

你应该使用 CSS 伪类 ：hover 来执行此操作，而不是 javascript。

您可以为元素具有慕索时定义一组特殊的样式。指定此样式的备用图像。

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

$('.Up').hover(function(){
    $(this).addClass('active');
}, function(){
    $(this).removeClass('active');
});
相关文章：