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伪类：悬停来做这个，而不是javascript。

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

Answer 4

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

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

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

4 个答案: