鼠标移开背景动画 - 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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！