: 移动 DOM 元素时持续悬停答案

【问题标题】：:hover persistent when moving DOM element: 移动 DOM 元素时持续悬停
【发布时间】：2012-12-28 08:56:24
【问题描述】：

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

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

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

我知道您不能通过 javascript 直接控制 CSS 状态，因此我目前最好的解决方案是使用 Jquerys 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 “正确”。

【问题讨论】：

你用什么浏览器？在 Firefox 18 + Ubuntu 中移开时，该框恢复为绿色
Chrome 和 Internet Explorer 有这种行为。不确定 Opera、Safari 等。Firefox 重置：悬停状态。
哇。甚至 IE10 也有这种行为。浏览器改进就这么多。

标签： javascript jquery html css dom

【解决方案1】：

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

div:active{
  background-color:green;
}

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

【讨论】：

智能优雅的修复。不幸的是，浏览器之间的 :focus 行为非常不一致。此解决方案适用于 IE10，但不适用于 Chrome。如果可能的话，我想保持其他 Css 状态“免费”用于其他用途。不过还是谢谢你的回答！