简而言之:单击图像会通过 css 过渡来移动它。我希望当图像从鼠标下方移开时，图像的悬停效果消失。
我有一张没有边框的图像。当您单击它时，页面会使用 Zoomooz 放大。当您将鼠标悬停在图像上时，会显示边框，并在页面放大时保留在那里。 如果您单击任意位置，则会缩小。但是，如果您单击图像进行缩小并且不移动鼠标，图像将保持悬停状态，因此即使鼠标当前不在图像上，图像也会保留边框。
我知道这是合乎逻辑的，因为没有事件触发更改，但是解决这个问题的方法是什么？我尝试仅向单击事件添加样式更改，但没有动画，因为它不是 css ($("img").css("border-color","rgba(0,0, 0,0)");))
这是我的 HTML:
<body>
<img src="https://i.imgur.com/e1TsDx0.png" id="abc"/>
</body>
CSS
img {
width: 100px;
border: 1px solid black;
border-color: rgba(0, 0, 0, 0);
margin-left: 10px;
transition: border-color 600ms;
}
img:hover {
border: 1px solid black;
transition:border-color 0s;
}
.zoomedimg {
border-color: rgba(0, 0, 0, 1);
}
Javascript:
$(document).ready(function() {
$("img").click(function(evt) {
event.stopPropagation()
if ($("img").hasClass('zoomedimg')) {
$("img").removeClass('zoomedimg');
$("body").zoomTo();
} else {
$("img").addClass('zoomedimg');
$("img").zoomTo();
}
});
$(window).click(function(evt) {
$("body").zoomTo({});
$("img").removeClass('zoomedimg');
});
});
与这些问题密切相关:
How to remove hover state when the element moves这有一个非常清醒的 答案，在那个例子中我无法开始工作。当我像该解决方案中那样单击图像时，我确实尝试设置边框颜色。但是，变化的边框不算作过渡，因此它不会动画。
Hover state is maintained during a transition even if the element has gone 这有一个非常广泛的答案，但我真的不明白如何将其应用到我的情况。
编辑: Junaid Ahmed 提供了一个使用 jQuery 和类进行悬停转换的解决方案。当您单击缩小时，您将删除“悬停”类，从而删除边框。这提出了一个新问题:
如果您在单击时将鼠标悬停在图像上，并且一直悬停直到缩小结束，边框就会消失，并且直到您再次将鼠标移出并悬停时才会返回。
我该如何解决这个问题？
最佳答案
@Jason 是对的。您可以使用 CSS 删除悬停效果并使用 JS/JQuery 完成悬停效果。 Check my forked JSFiddle
CSS:
img {
width: 100px;
border: 1px solid black;
border-color: rgba(0, 0, 0, 0);
margin-left: 10px;
transition: border-color 600ms;
}
img.hover {
border: 1px solid black;
transition:border-color 0s;
}
.zoomedimg {
border-color: rgba(0, 0, 0, 1);
}
JS:
$(document).ready(function() {
$("img").on('mouseover', function(){
$("img").addClass('hover');
});
$("img").on('mouseout', function(){
$("img").removeClass('hover');
});
$("img").click(function(evt) {
event.stopPropagation()
if ($("img").hasClass('zoomedimg')) {
$("img").removeClass('zoomedimg').removeClass('hover');
$("body").zoomTo();
} else {
$("img").addClass('zoomedimg');
$("img").zoomTo();
}
});
$(window).click(function(evt) {
$("body").zoomTo({});
$("img").removeClass('zoomedimg').removeClass('hover');
});
});
关于javascript - 移动元素时如何更改悬停状态？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44709469/