javascript - How to get Mouse Out effect in CSS -
javascript - How to get Mouse Out effect in CSS -
i have created transition effect on div
. have written next code , working fine, when hover
on div
, color smoothly changes, when remove mouse color backs original state abruptly.
i want know method of changing color on mouse out
event well.
kindly check code , guide me.
<nav> <ul> <li id="skills" class="navtext" >work -experience</li> <li id="web" class="navtext">skills </li> </ul> </nav>
css
nav ul #skills { position:absolute; width: 150px; height: 150px; border:6px solid; border-color:white; border-radius: 150px; line-height:150px; font-size: 15px; #background-color: ea7079; background-color: #1a1a1a; color: white; left:370px; } nav ul #skills:hover { position:absolute; width: 150px; height: 150px; border:6px solid; border-color: #dcdee0; border-radius: 150px; line-height:150px; font-size: 15px; background-color: ea7079; color: white; left:370px; /* css3 */ -webkit-transition: 1000ms ; -moz-transition: 1000ms ; -ms-transition: 1000ms ; -o-transition: 1000ms ; transition: 1000ms ; }
it should work if have transition on non-hovered element, according css-tricks
av ul #skills { position:absolute; width: 150px; height: 150px; border:6px solid; border-color:white; border-radius: 150px; line-height:150px; font-size: 15px; #background-color: ea7079; background-color: #1a1a1a; color: white; left:370px; /* css3 */ -webkit-transition: 1000ms ; -moz-transition: 1000ms ; -ms-transition: 1000ms ; -o-transition: 1000ms ; transition: 1000ms ; } nav ul #skills:hover { position:absolute; width: 150px; height: 150px; border:6px solid; border-color: #dcdee0; border-radius: 150px; line-height:150px; font-size: 15px; background-color: ea7079; color: white; left:370px; }
javascript jquery css css3 mousehover
Comments
Post a Comment