2

メニュー項目のデフォルトの背景色は白です。マウスホバーの色は青です

私の質問は-

メニュー項目にマウスを合わせると。最初に1〜2秒後に青色を表示する必要があり、色が他の黄色に変わるはずです。

css Transitionsまたは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;
}

<ahref = "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 に答える