javascript - :hover persistent when moving DOM element

Question

当从鼠标下方移动 DOM 元素时，CSS :hover 状态会保持不变，直到鼠标指针移动。

http://jsfiddle.net/mMzPd/ (点击后 div 元素将变为红色，直到用户移动鼠标。)

我正在寻找任何推荐的解决方案，以在 DOM 元素移动时关闭悬停或重置悬停状态。或者，当用户单击该元素时。

我知道您不能通过 javascript 直接控制 CSS 状态，所以我目前最好的解决方案是使用 Jquery 的 mouseenter() 和 mouseleave() 切换 HTML 类。我真的不觉得这个修复很优雅，也不能很好地扩展到禁用 javascript 的浏览器。

$('div').mouseenter(function(){
  $(this).addClass('hover');
});

$('div').mouseleave(function(){
  $(this).removeClass('hover');
});

$('div').click(function(){
  $(this).animate({'margin-top':'100px'});
  $(this).removeClass('hover');
});

( http://jsfiddle.net/mMzPd/4/ )

有没有更接近纯 Css 的解决方案？理想情况下希望将样式规则排除在我的 Javascript 之外。

此问题出现在 Chrome 和 Internet Explorer 中。 Firefox 切换 :hover “正确”。

Answer 1

在 :hover 之后使用另一个伪类选择器怎么样？

div:active{
  background-color:green;
}

http://jsfiddle.net/mMzPd/6/