2

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

我的问题是——

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

是否有可能使用 css 过渡或任何使用 CSS 的想法？

4

3 回答 3

3

试试这个也许有帮助

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;
}

​<a href="http://jsfiddle.net/GKXua/" rel="nofollow">jsFiddle

于 2012-10-19T09:35:34.980 回答
1

您可以使用 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; }
}
于 2012-10-19T16:50:24.353 回答
0

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

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

于 2012-10-19T08:00:54.497 回答