CODEWITHSUNDEEP
htmlcss
John
John

Reputation: 61

CSS and HTML mouse out?

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?

Upvotes: 4

Views: 12903

Answers (8)

Prada
Prada

Reputation: 1

Mouseout for css!

div:not( :hover ){ ... }

Upvotes: 0

Brock Adams
Brock Adams

Reputation: 93533

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.

Upvotes: 1

Sarfraz
Sarfraz

Reputation: 382806

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

Upvotes: 1

Salil
Salil

Reputation: 47512

AFAIK There is no mouse out event but

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

a:visited{

}

Upvotes: 0

Nick Craver
Nick Craver

Reputation: 630559

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.

Upvotes: 6

Pekka
Pekka

Reputation: 449613

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.

Upvotes: 1

Sniffer
Sniffer

Reputation: 6412

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

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

Upvotes: 0

phihag
phihag

Reputation: 288090

You are looking for the :hover pseudoclass.

a:hover {background: red;}

will highlight any link you hover over.

Upvotes: 0

Related Questions