转换延迟不适用于边框

Question

 .hovereffect:hover > .hidden { opacity: 1; height: 1.5em; padding: 0.5em 1em 0.5em 2em; border: thin solid white; transition-delay: 0s; } .hovereffect .hidden { opacity: 0; clear: both; height: 0em; padding: 0em; border: none; transition-property: opacity height padding border; transition-duration: 400ms; transition-delay: 1s; } nav { float: right; width: 15em; margin: 0.1em 0em 0.1em 1em; font-variant: small-caps; } nav a { display: block; background-color: #FBF0D4; color: #725D29; border: thin solid white; padding: 0.5em 1em; text-decoration: underline; } nav a:hover, nav a:active { background-color: #725D29; color: #FBF0D4; } 

 <nav> <a href="/guitar">Menu 1</a> <div class="hovereffect"> <a href="/software">Menu 2</a> <a class="hidden" href="/software/practicaluml">Submenu 1</a> <a class="hidden" href="/software/trusting_trust">Submenu 2</a> </div> <a href="/sketches">Menu 3</a> <a href="/sketches">Menu 4</a> </nav> 

JSFiddle: http://jsfiddle.net/ke9cc0c7/

I am trying to show a list of sub menus on :hover over a menu item, which is hidden otherwise. But the collapsing list was causing menu items to change position the moment user moved mouse away from the submenu, forcing an unsuspecting user to chase after a preferred link. So I decided to add a transition-delay. But for some reason it doesn't work on border! (See the JSFiddle link for demo.) The moment user moves mouse away from the submenu, border is reset to 0 without any delay.

Any particular mistake I am making? I am just a learner.

Answer 1

That is because the border-style property is not a transitionable property . When you transition from border:none to border: thin solid white , the border-style is also being changed along with the border-color and the border-width . The initial value of border-style is none .

Setting border: 0px solid white as the initial value would make it work properly because border-style remains the same even though border itself is removed because the width is 0px and would not produce any visual difference.

 .hovereffect:hover > .hidden { opacity: 1; height: 1.5em; padding: 0.5em 1em 0.5em 2em; border: thin solid white; transition-delay: 0s; } .hovereffect .hidden { opacity: 0; clear: both; height: 0em; padding: 0em; border: 0px solid white; transition-property: opacity height padding border; transition-duration: 400ms; transition-delay: 1s; } nav { float: right; width: 15em; margin: 0.1em 0em 0.1em 1em; font-variant: small-caps; } nav a { display: block; background-color: #FBF0D4; color: #725D29; border: thin solid white; padding: 0.5em 1em; text-decoration: underline; } nav a:hover, nav a:active { background-color: #725D29; color: #FBF0D4; } 

 <nav> <a href="/guitar">Menu 1</a> <div class="hovereffect"> <a href="/software">Menu 2</a> <a class="hidden" href="/software/practicaluml">Submenu 1</a> <a class="hidden" href="/software/trusting_trust">Submenu 2</a> </div> <a href="/sketches">Menu 3</a> <a href="/sketches">Menu 4</a> </nav> 

You can find the full list of animatable/transitionable properties in the spec here .