我试图创造一种情况,当您将鼠标悬停在图像上时,它将隐藏图像并显示另一个图像。当你悬停时则相反。
我尝试过使用所有想到的各种悬停效果,例如 mouseenter、mouseover、hover 等。
它们都会导致同样的问题。如果我非常坚定且快速地将光标拖到操作区域中,那么它将给我带来所需的效果。但是,如果我慢慢地将光标拖到操作区域中,那么它会在图像之间跳转几次,然后最终停在正确的图像上。
这看起来非常不专业,我希望它能够更加连续地执行此操作,这样无论我做得慢还是快,它都只会跳一次。
这是我的脚本:
$("#DenmarkMap").hide();
$("#InfoBadge1").hover(function(){
$("#InfoLogo").hide("puff");
$("#DenmarkMap").show("puff");
}, function(){
$("#DenmarkMap").hide("puff");
$("#InfoLogo").show("puff");
});
这是一个不起作用的 fiddle https://jsfiddle.net/ydeLvxx2/
希望大家能帮我解决这个问题。
最佳答案
这是一个纯 Javascript 解决方案(不需要 jQuery)
https://jsfiddle.net/uL0hpxbu/ 更新:具有CSS3“泡芙”效果的版本:https://jsfiddle.net/230ta4tk/2/
主要脚本
如下所示:
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="" />
关于javascript - Hover()、mouseenter()、mouseover() 等来回跳跃,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35894708/