悬停(），鼠标输入(），鼠标悬停(）等来回跳跃

Hover(), mouseenter(), mouseover(), etc jumping back and forth

本文关键字：悬停 鼠标 跳跃 输入      更新时间：2023-09-26

我试图在您将鼠标悬停在图像上时制造一种情况，然后它将隐藏图像并显示另一张图像。 当你悬停在外面时，反之亦然。

我尝试使用想到的所有各种悬停效果，如鼠标输入、鼠标悬停、悬停等。

它们都会导致相同的问题。如果我非常坚定快速地将光标拖到动作领域，那么它会给我想要的效果。但是，如果我慢慢将光标拖到动作领域，那么它会在图像之间跳跃几次，然后最终停在正确的图像上。

这看起来非常不专业，我希望它在这个动作中更加重要，这样无论我做得慢还是快，它都只会跳一次。

这是我的脚本：

$("#DenmarkMap").hide();
$("#InfoBadge1").hover(function(){
    $("#InfoLogo").hide("puff");
    $("#DenmarkMap").show("puff");
}, function(){
    $("#DenmarkMap").hide("puff");
    $("#InfoLogo").show("puff");
});

这是一个不工作的小提琴https://jsfiddle.net/ydeLvxx2/

希望你们能帮我解决这个问题。

这是一个纯粹的Javascript解决方案（不需要jQuery）

https://jsfiddle.net/uL0hpxbu/更新：具有CSS3"泡芙"效果的版本：https://jsfiddle.net/230ta4tk/2/

以下是主要script的外观：

    var InfoBadge1 = document.getElementById("InfoBadge1");
    var InfoLogo = document.getElementById("InfoLogo");
    var DenmarkMap = document.getElementById("DenmarkMap");
    InfoBadge1.addEventListener("mouseover", function() {
      InfoLogo.classList.toggle("puff");
      DenmarkMap.classList.toggle("puff");
    });
    InfoBadge1.addEventListener("mouseout", function() {
      InfoLogo.classList.toggle("puff");
      DenmarkMap.classList.toggle("puff");
    });

和CSS部分（只是一个示例，根据需要更改它）

    #DenmarkMap {
      position: absolute;
      left: 0;
      top: 0;
      transition: .5s all;
    }
    #InfoLogo {
      position: absolute;
      left: 250px;
      top: 120px;
      transition: .5s all;
    }
    #InfoBadge1 {
        position: absolute;
        left: 0px;
        top: 120px;
    }
    .puff {
      transform: scale(1.2);
      opacity: 0;
    }

和 HTML：

<img id="InfoBadge1" src="http://dummyimage.com/200x100/803580/ffffff&text=InfoBadge1" alt="" />
<img id="InfoLogo" src="http://dummyimage.com/200x100/803580/ffffff&text=InfoLogo" alt="" />
<img id="DenmarkMap" class="puff" src="http://dummyimage.com/200x100/3c8036/ffffff&text=DenmarkMap" alt="" />

您不应该将悬停的mouseleave/mouseout事件绑定到同一图像，因为您刚刚隐藏了它。

相反，请考虑将hover函数绑定到父 DOM 节点（例如 DIV）：

<div id="images">
  <img id="InfoBadge1" src="./Photos/DenmarkInfoBadge.png"> 
  <img id="InfoLogo" src="./Photos/InfoLogo.png">
  <img id="DenmarkMap" src="./Photos/DenmarkMap.png">
</div>

然后，您的JavaScript可以变成：

$("#DenmarkMap").hide();
$("#images").hover(function(){
    $("#InfoLogo").hide("puff");
    $("#DenmarkMap").show("puff");
}, function(){
    $("#DenmarkMap").hide("puff");
    $("#InfoLogo").show("puff");
});
相关文章：