鼠标移开背景动画 - CSS [英] Mouseout background animation - CSS

问题描述

在此小提琴（HTML + CSS），你可以看到，如果你将鼠标放置在链接两者字体和背景，慢慢REA-动画，但如果你鼠标移开的只有的字体再次重新动画。在背景只是快闪回

In this Fiddle (html+css) you can see that if you mouseover the "link" both, font and background, slowly rea-animates but if you mouseout ONLY the font re-animates again. The background just fast blink back to

   a {background:}

如何强制背景动画甚至在鼠标移开？

How do I force the background to animate even on mouseout?

推荐答案

您有您的只在悬停背景转换。这意味着，如果用户没有悬停的过渡不会被执行。通过给 #dolu一个 过渡：5S 而不是过渡：颜色5S 它是固定的。

You had your transition for the background only on the hover. That means that if the user isn't hovering the transition isn't executed. By giving #dolu a transition: 5s instead of transition: color 5s it is fixed.

更新小提琴

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

这篇关于鼠标移开背景动画 - CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！