CODEWITHSUNDEEP
javascriptjquerycssmousehover
user3480644
user3480644

Reputation: 577

How to get Mouse Out effect in CSS

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 ;     
}

Upvotes: 1

Views: 243

Answers (2)

Jacob G
Jacob G

Reputation: 14172

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!

Upvotes: 4

bigblind
bigblind

Reputation: 12867

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;


}

Upvotes: 2

Related Questions