当您转换对象时,悬停状态不会更新(CSS 规则为 :hover
),直到您移动鼠标。
当您将 DOM 元素移动到用户鼠标下方时(使用 transition
或其他等效项),悬停状态不会更新,直到鼠标移动。有什么解决方法吗?我不想使用花哨的 JS 来触发“鼠标悬停”事件。
JSFiddle:http://jsfiddle.net/forestka/8xJkR/1/
HTML:
<div id="below">
This is the one below. (Now move the mouse.)
</div>
<div id="hover">
Click me! (But don't move the mouse after you click)
</div>
CSS:
#hover:hover,
#below:hover {
background-color: #f00;
}
#below {
padding:10px;
position: absolute;
top:0;
left:0;
}
#hover {
background-color: #ddd;
padding: 10px;
position: absolute;
left: 0;
top:0;
transition: top 1s ease;
z-index: 100;
}
#hover.hidden {
top: 50px;
}
旁注:所以不会让我插入没有代码的 JSFiddle 链接??
最佳答案
这很奇怪。 IE10 似乎也有相同的行为。在主要的 3 种浏览器中,Firefox 似乎是唯一一款可以满足您的需求的浏览器。 (显示隐藏的 div 的悬停状态,因为它变得可见,而不是必须移动鼠标才能让它显示悬停状态)
这显然不是您想要的,但如果您需要解决方法,您可以这样做:
$("#hover").click(function() {
$("#hover").addClass("hidden");
$("#below").trigger("mouseover");
});
$("#below").hover(function() {
$("#below").css("background-color", "#f00");
}, function () {
$("#below").css("background-color", '');
});
JS Fiddle Demo
有人可能有仅使用 CSS 的更好解决方案,但我想无论如何我都会给您的问题一个答案。
关于html - CSS 过渡不更新悬停状态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16578309/