使用css将鼠标移到2种颜色上
使用css将鼠标移到2种颜色上
提问于 2012-10-19 15:31:44
菜单项默认背景-颜色为白色。鼠标悬停颜色为蓝色
我的问题是-
如果我们按住鼠标，将鼠标悬停在菜单项上。首先需要显示蓝色，1到2秒后，颜色应该变成其他颜色的黄色。
有没有可能使用CSS转换或者css的任何想法？
回答 3
Stack Overflow用户
发布于 2012-10-19 17:35:35
试试这个或许能帮上忙
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
Stack Overflow用户
发布于 2012-10-20 00:50:24
您可以使用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; }
}Stack Overflow用户
发布于 2012-10-19 16:00:54
我想这可能就是你要找的。http://www.acuras.co.uk/articles/53-javascript--css-flashing-text--how-to-do-it--why-not-to-do-it
老实说，我不知道你为什么需要这样一个链接，它只会让你的网站看起来像是一个完全的初学者，因为它非常分散注意力。有更好的动画和插件，特别是如果你使用jQuery的话。看看这里的灵感：http://bestofjquery.com/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/12969419
复制相关文章
相似问题
腾讯云开发者
