1

When moving a DOM element from under the mouse the CSS :hover state stays persistent until the mouse pointer is moved.

http://jsfiddle.net/mMzPd/ ( div element will be red after click until user moves the mouse. )

I'm looking for any recommended solutions to turn the hover off or reset hover state when the DOM element moves. Alternatively when the user clicks the element.

I've understood that you can't directly control CSS states through javascript so my best current solution is to toggle a HTML class with Jquerys mouseenter() and mouseleave(). I don't really find this fix elegant, nor does it scale well to a browser with javascript disabled.

$('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/ )

Any solutions closer to pure Css out there? Would ideally like to keep style rules out of my Javascript.

This issue is showing in Chrome and Internet Explorer. Firefox toggles the :hover "correctly".

4

1 回答 1

2

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

div:active{
  background-color:green;
}

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

于 2013-01-14T11:49:07.230 回答