CSS transition only on "unhover"

I'm trying to build an effect that has a transition on hover, but only when the mouse leaves the element. Essentially only on "unhover", so to speak.

This is working great in FF6, C12, and IE10, but not in O11.5. Opera still performans the transition on hover *and* unhover, while all other transition-capable browser only perform the transition on unhover.

This is my code, simplified:

.menu {
  display: block; position: relative; overflow: hidden; background: #d72019;
  -moz-transition: 1s ease-out all; -webkit-transition: 1s ease-out all; -o-transition: 1s ease-out all; -ms-transition: 1s ease-out all; transition: 1s ease-out all;
}
.menu:hover {
  background-color: #00a4e3;
  -moz-transition: none; -webkit-transition: none; -o-transition: none; -ms-transition: none; transition: none;
}

I left in all the non-transitioned properties that might make a difference. the ".menu" selector applies only to < a> elements in a < li> in a < ul> and finally in a < div> container that is absolutely positioned.

Like I said, Opera in the *only* browser in my test suite that doesn't understand this. So is it a bug (that needs fixing ) or am I doing something wrong?

Thanks.

Have you tried e.g. cubic-bezier(0, 0, 0.58, 1.0)?

I'm not sure why that would help, but I've tried and it doesn't help. Isn't that cubic-bezier not just a fancy notation of ease-out?

I've noticed that if I replace the transition in the :hover by something with 4 seconds, it works as excpected: a 4s transition on hover, and the other 1s-transition on unhover. But I basically want *no* transition on hover...

One other thing. If I replace the transition in the :hover like this:

.menu { /*...*/ -o-transition: 1s ease-out all; }   /* unhover */
.menu:hover { /*...*/ -o-transition: 0s linear all; }   /* hover */

It *sort of* works. No transition on hover (or a 0-second one really) and a 1-second transition on unhover.

However, the 0-second hover "transition" doesn't work while the unhover-transition is still processing. If you move the mouse over the element a second time within 1 second, the hover transition gets the delay of the unhover transition. I think I'd call that a bug, because that is just simply not what the css says. It's as if Opera internally removes the hover pseudo-class only *after* the transition is complete, which is wrong, imo.

Originally posted by thany:

I'm not sure why that would help, but I've tried and it doesn't help. Isn't that cubic-bezier not just a fancy notation of ease-out?

Indeed, but now it's clear that it's the underlying mechanism that's not implemented and it's not just a missing keyword or two. Anyhoo, Opera only claims partial support at this time; it's perhaps a pity they don't specify what part.

Originally posted by thany:

However, the 0-second hover "transition" doesn't work while the unhover-transition is still processing. If you move the mouse over the element a second time within 1 second, the hover transition gets the delay of the unhover transition. I think I'd call that a bug, because that is just simply not what the css says. It's as if Opera internally removes the hover pseudo-class only *after* the transition is complete, which is wrong, imo.

I'm not sure if I understand you correctly, but if I do I have to disagree. I think the fact that you can make CSS menus now that behave just like regular OS menus (that is, they don't disappear as soon as you accidentally cease hovering them and you can stop the fading out process at any point until the fade-out is completed) is one of the best features of CSS transitions. Of course this effect could be accomplished with Javascript in the past, but that never quite satisfied me.

I'm not sure if I understand you correctly, but if I do I have to disagree. I think the fact that you can make CSS menus now that behave just like regular OS menus (that is, they don't disappear as soon as you accidentally cease hovering them and you can stop the fading out process at any point until the fade-out is completed) is one of the best features of CSS transitions. Of course this effect could be accomplished with Javascript in the past, but that never quite satisfied me.

I understand that for CSS menus this behavior is preferrable. But menus are elements that appear and disappear completely. My case is with changing colors, which should be a completely different kind of property to transition. I'm not sure what the spec says about when to remove the pseudo-class (if anything at all), and I'm not sure what Mozilla and WebKit do in these cases. But for the Dev Team it might be worth looking into at least.

Your statement about OS menus is only partly correct, iyam. If I click a menu open, for example in the start panel of my windows 7 box, it stays open until I click somewhere or select an item. But that aside

I think the Windows Vista (and higher) start menu is a horrible concoction. You can neither sort menu items manually, nor display a decent number of items at once. Since it opens things in place it pretty much kills the ease of use completely. Actually in Gnome/Linux menus are better than that also because menus stay open even when you stop hovering them. Still, it wasn't totally horrible in the XP and lower start menu due to the timeout.

Anyway, iirc with e.g. context menus Windows still has the old behavior? I haven't really used Windows 7 enough to notice one way or the other.

Originally posted by thany:

My case is with changing colors, which should be a completely different kind of property to transition. I'm not sure what the spec says about when to remove the pseudo-class (if anything at all), and I'm not sure what Mozilla and WebKit do in these cases. But for the Dev Team it might be worth looking into at least.

Alright