如何在 CSS 中获得鼠标移出效果

Question

我在div 上创建了一个过渡效果。我已经编写了以下代码并且它工作正常，当我在hover 上div 时，颜色会平滑地变化，但是当我移除鼠标时，颜色会突然恢复到原来的状态。

我也想知道Mouse outEvent上慢慢改变颜色的方法。

请检查我的代码并指导我。

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

Answer 1

它突然变回了，因为你在 :hover 规则中有转换。过渡仅在鼠标悬停在元素上时才有效。 改为这样做：

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

看到了吗？仅当鼠标悬停在元素上时才会应用过渡，因为它在 :hover 规则中。因此，它不能在鼠标离开后淡出，因为不再应用过渡。如果将过渡应用于元素样式，则每次鼠标移过它时都会淡入淡出。
Here is a JSFiddle to show what I mean.
希望这会有所帮助！

Answer 2

根据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;


}