CSS and HTML mouse out?

Question

Hi, ive been googling but cannot seem to find a mouse out method, similar to hover, for css.

Is there one and if so how should it be coded?

Answer 1

There is no mouse out event in CSS. You need javascript in order to do that.

Answer 2

You are looking for the :hover pseudoclass.

a:hover {background: red;}

will highlight any link you hover over.

Answer 3

You can only have the following CSS 'events' as far as I'm aware.

a (default), a:hover, a:active, a:visited

Answer 4

There is the :hover pseudo-class:

element:hover { color: red }

there is no event or selector for when the :hover status ends, if that is what you're looking for.

You will have to turn to Javascript and the onmouseout event for that.

Answer 5

You only need the :hover pseudo-class for this, when you mouse out of the element, it'll return to it's default non-:hover state, like this:

.class { color: black; } 
.class:hover { color: red; }

when you hover, the color will be red and when you "mouseout", the color will return to black because it no longer matches the :hover selector. This is the default behavior for all browsers, nothing special you need to do here.

If you want to do something programmatic, you're looking for the mouseout JavaScript event.

Answer 6

AFAIK There is no mouse out event but

if you want for the link you visit earlier you can use

a:visited{

}

Answer 7

There isn't a mouseout-type selector for CSS. But an element's normal style is its "mouseout" state!

What, exactly are you trying to do that normal CSS and the :hover selector don't cover?

Chances are, you can do it with JavaScript. See here or here.