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

Question

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

我也想知道在 Mouse out 事件上缓慢改变颜色的方法。

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

<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 .
希望这对您有所帮助!