Mouseout背景动画 - CSS

Question

在这个Fiddle（html + css）中，您可以看到，如果您鼠标悬停在“链接”上，font和background，请慢慢重新制作动画，但如果您鼠标移除仅字体再次动画。 background只是快速回到

   a {background:}

即使在mouseout上，如何强制背景动画？

Answer 1

您只能在悬停时进行背景转换。这意味着如果用户没有悬停，则不执行转换。通过提供#dolu a transition: 5s代替transition: color 5s，它已得到修复。

updated fiddle

完整的CSS：

body {background: red; }

#dolu {
    position: absolute; 
    bottom: 5px; text-align: 
        center; width: 100%; 
}

#dolu a:hover {
    color: white; 
    background: rgb(31, 31, 31); 

} 
#dolu a {
    color: black; 
    background: white; 
    font-size: 40px; 
    font-weight: bold; 
    font-family: sans-serif; 
    font-variant: normal; 
    text-decoration: none; 
    padding: 10 20 6 20; 
    transition: 5s; 
}