Question

从鼠标下移动DOM元素时，CSS：悬停状态保持不变，直到移动鼠标指针。

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切换：“正确”悬停。

Answer 1

在hover？

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

div:active{
  background-color:green;
}

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

：移动DOM元素时悬停持久化

1 个答案: