Mouseout背景动画

Question

在这个小提琴 (html+css)中，你可以看到，如果你在“链接”上鼠标移动，font和background，缓慢的rea-动画，但是如果你只按下鼠标，字体就会再次恢复动画。background只是快速地闪回

   a {background:}

我如何强制背景动画，即使在鼠标？

Answer 1

你只有在悬停时才有你的背景过渡。这意味着，如果用户没有悬停，就不会执行转换。通过给出#dolu a transition: 5s而不是transition: color 5s，它是固定的。

更新小提琴

完整的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; 
}