What is the opposite: hover over the mouse?

Question

Is there a way to do the opposite of :hover using only CSS? As with: if :hover is equal to on Mouse Enter , is there a CSS equivalent for on Mouse Leave ?

Example:

I have an HTML menu that uses list items. When I find one of the elements, there is a color CSS animation from #999 to black . How to create the opposite effect when the mouse leaves the area of ​​an element with animation from black to #999 ?

jsFiddle

(Keep in mind that I don't want to answer just this example, but the problem is with the "opposite :hover ".)

Answer 1

If I understand correctly, you could do the same by moving the transitions to the link, and not to the hover state:

 ul li a { color:#999; transition: color 0.5s linear; /* vendorless fallback */ -o-transition: color 0.5s linear; /* opera */ -ms-transition: color 0.5s linear; /* IE 10 */ -moz-transition: color 0.5s linear; /* Firefox */ -webkit-transition: color 0.5s linear; /*safari and chrome */ } ul li a:hover { color:black; cursor: pointer; } 

http://jsfiddle.net/spacebeers/sELKu/3/

Determination of soaring:

The: hover selector is used to select items when you hover them.

By this definition, the opposite of pointing is any point where the mouse is located , not above it. Someone made this article a lot smarter than me by setting different transitions for both states - http://css-tricks.com/different-transitions-for-hover-on-hover-off/

 #thing { padding: 10px; border-radius: 5px; /* HOVER OFF */ -webkit-transition: padding 2s; } #thing:hover { padding: 20px; border-radius: 15px; /* HOVER ON */ -webkit-transition: border-radius 2s; } 

Answer 2

Just use CSS transitions instead of animations.

 A { color: #999; transition: color 1s ease-in-out; } A:hover { color: #000; } 

Live demo

Answer 3

There is no explicit property for mouse resolution in CSS.

You can use: hover over all other elements except the subject in question to achieve this effect. But I'm not sure how practical this is.

I think you need to look at the JS / jQuery solution.

Answer 4

You can use CSS3 transition

Some good links:

http://css-tricks.com/different-transitions-for-hover-on-hover-off/

http://www.alistapart.com/articles/understanding-css3-transitions/

Answer 5

You misunderstood :hover ; he says the mouse is above the element, not just the mouse just entered the element.

You can add animation to the selector without :hover to achieve the desired effect.

Transitions are the best option: http://jsfiddle.net/Cvx96/

Answer 6

The opposite :hover looks like :link .

(edit: not technically the other way around, because there are 4 selectors :link :visited :hover and :active . Five if you turned on :focus .)

For example, when defining a .button:hover{ text-decoration:none } rule to remove an underline from a button, an underline appears when you roll back the button in some browsers. I fixed it with .button:hover, .button:link{ text-decoration:none }

This, of course, only works for elements that are actually links (have the href attribute)

Answer 7

Although there are enough answers here, I really think the W3Schools example on this issue is very simple (it cleared up the confusion (for me) right away.)

Use the :hover selector to change the style of the button while moving the mouse over it.

Tip: Use the transition duration property to determine the speed of the freeze effect:

Example

 .button { -webkit-transition-duration: 0.4s; /* Safari & Chrome */ transition-duration: 0.4s; } .button:hover { background-color: #4CAF50; /* Green */ color: white; } 

So, for transitions where you want the "enter" and "exit" animations to be the same, you need to use the transitions on the main .button selector, not the hover .button:hover selector. For transitions in which you want the "enter" and "exit" animations to be different, you will need to specify different transitions for the selector and selector.

Answer 8

Put the time in the field without freezing:

 li a { background-color: #111; transition:1s; } li a:hover { padding:19px; }