How to get Mouse Out effect in CSS

Question

I have created a transition effect on a div. I have written the following code and its working fine, when I hover on the div, the color smoothly changes, but when I remove the mouse the color backs to its original state abruptly.

I want to know the method of changing the color slowly on Mouse out Event as well.

Kindly check my code and 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: all 1000ms ;
   -moz-transition: all 1000ms ;
   -ms-transition: all 1000ms ;
   -o-transition: all 1000ms ;
   transition: all 1000ms ;     
}

possible duplicate of [How to get this hover effect with just CSS](http://stackoverflow.com/questions/18460149/how-to-get-this-hover-effect-with-just-css) — byJeevan, Jun 23 '14 at 16:43

Jacob G · Answer 1 · 2014-06-23T17:04:20.373

It is changing back suddenly because you have the transitions in the :hover rule. The transitions only works when the mouse is over the element. Do it like this instead:

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;
    /*  CSS3 */
    -webkit-transition: all 1000ms ;
    -moz-transition: all 1000ms ;
    -ms-transition: all 1000ms ;
    -o-transition: all 1000ms ;
    transition: all 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;
    }

See? The transitions are applied only when the mouse is over the element because it is in the :hover rule. Thus, it cannot fade back out after the mouse leaves because the transitions are no longer applied. If the transitions are applied to the elements style, it will fade in and out every time the mouse moves over it.
Here is a JSFiddle to show what I mean.
Hope this helps!

bigblind · Accepted Answer · 2014-06-23T16:52:11.550

2

It should work if you only have transition on the non-hovered element, according to 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: all 1000ms ;
-moz-transition: all 1000ms ;
-ms-transition: all 1000ms ;
-o-transition: all 1000ms ;
transition: all 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;


}

edited Jun 23 '14 at 16:52

answered Jun 23 '14 at 16:44

bigblind

12,539
14
68
123

1

This is how I thought it would work. But when I look at the code I just posted, it causes a lot of flickering, at least in chrome. I'm taking a look to see if it might be because I'm specifying 'all'. – bigblind Jun 23 '14 at 16:48
1

At CSS tricks, I notice they only apply the transition to the non-hovered element, but I'm still looking into how that works out with your example. – bigblind Jun 23 '14 at 16:52

How to get Mouse Out effect in CSS

2 Answers2