If I understand correctly you could do the same thing by moving your transitions to the link rather than 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/
The definition of hover is:
The :hover selector is used to select elements when you mouse over
them.
By that definition the opposite of hover is any point at which the mouse is not over it. Someone far smarter than me has done this article, setting different transitions on 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;
}
:hover
is quite simply:not(:hover)
; however,:hover
is not synonymous withonmouseenter
nor is:not(:hover)
the same asonmouseleave
. CSS doesn't have any concept of DOM events. – BoltClock♦ Jun 12 '12 at 10:53:hover
simply means "an element that has a mouse pointer over it". It doesn't indicate if the mouse pointer transitioned from another element to this element. It just means that the mouse pointer is currently on the element. – BoltClock♦ Jun 12 '12 at 10:55:not(:hover)
will apply. Here's a demo: jsfiddle.net/BoltClock/rghBX – BoltClock♦ Jun 12 '12 at 11:01