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