Mouseover 2颜色带有CSS

Question

菜单项默认背景色为白色。鼠标悬停的颜色为蓝色

我的问题是 -

如果我们将鼠标悬停在菜单项上。首先需要在以后显示蓝色1或2秒的颜色应更改为其他颜色黄色。

CSS过渡或CSS的任何想法是可能的吗？

Answer 1

尝试一下，也许有帮助

html

<div class="test"><div></div></div>​​​​​​​​​​​​​​​​

CSS

​.test{
    width:100px;
    height:100px;
    background-color:#0ff;  
   -webkit-transition:background-color 1s ease-in; 
    -moz-transition:background-color 1s ease-in; 
    -o-transition:background-color 1s ease-in; 
    transition:background-color 1s ease-in; 
}
.test div{
    width:100px;
    height:100px;
    -webkit-transition:background-color 3s ease-in;
     -moz-transition:background-color 3s ease-in;
     -o-transition:background-color 3s ease-in;
     transition:background-color 3s ease-in;
}
.test:hover{
   background-color:#f00;
}
.test div:hover{
   background-color:green;
}

jsfiddle

Answer 2

您可以使用CSS3动画（现代浏览器中的工作）来实现此目标。这是一个将按钮的颜色从灰色变为蓝色的示例，然后是黄色。

希望有帮助！

演示-JSFIDDLE

html

<div class="button"></div>

CSS

.button {
    width: 150px;
    height: 50px;
    background-color: #e3e3e3;
    border: 1px solid #000000;
}
.button:hover {
     -webkit-animation: color 1.0s forwards;
        -moz-animation: color 1.0s forwards;
          -o-animation: color 1.0s forwards;
}
@-webkit-keyframes color {
      0%   { background-color: #0000ff; }
      50%  { background-color: #0000ff; }
      100% { background-color: #ffff00; }
}
@-moz-keyframes color {
      0%   { background-color: #0000ff; }
      50%  { background-color: #0000ff; }
      100% { background-color: #ffff00; }
}
@-o-keyframes color {
      0%   { background-color: #0000ff; }
      50%  { background-color: #0000ff; }
      100% { background-color: #ffff00; }
}

Answer 3

我认为这可能是您想要的。http://www.acuras.co.uk/articles/53-javascript-css-flashing-text--text-how-how-how-how-how-now-to-it-------------

老实说，我不知道为什么您需要这样的链接，它只是使您的网站看起来像是由完整的初学者制作的，因为它非常分散注意力。那里有很多更好的动画和插件，特别是如果您使用jQuery。查看此灵感：http：//bestofjquery.com/