鼠标悬停2种颜色与css

Question

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

我的问题是 -

如果我们持有的菜单项鼠标悬停。首先需要在1秒或2秒后显示蓝色，颜色应该变为其他颜色的黄色。

这是可能与CSS过渡或任何想法与CSS？

Answer 1

我想这可能是你正在寻找的。 http://www.acuras.co.uk/articles/53-javascript--css-flashing-text--how-to-do-it--why-not-to-do-it

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

Answer 2

试试这也许有助于

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 3

你可以用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; } 
}