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。
希望这有帮助！

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;


}

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

2 个答案: