4

私のページには、h-overで表示される一連のサブメニューを持つメニューがあります。

ホバーするたびにメニューの色が動的に変わるように計画しました。

色のセットを追加するのが好きです。

例えば

#cccccc;

#999999;

#474747;

#4c4c4c;

これらの色は、ホバーしたときに動的に変更する必要があります。次のような jquery を試しました。

$('menu').css('backgroundImage', 'url(something.gif)');

しかし、私の計画はcssだけで作ることです。これについて何か考えはありますか？

4

6 に答える 6

8 
$('menu').css('backgroundImage', 'url(something.gif)');

画像を使用しているにもかかわらず、使用してみてください

$('menu').css('background', '#cccccc');


$('menu:hover").css('background', '#999999', '#474747', '#4c4c4c');
于 2012-10-27T10:22:34.660 に答える
3

あなたはこれを使うことができます

$('ナビゲーション').css('背景',' #cccccc');

$('navigation:hover").css('background','#999999','#474747',#4c4c4c

于 2012-10-31T08:07:11.490 に答える
2 
#idOmMenu{
    background-color:#474747;
}
#idOmMenu:hover{
    background-color:#cccccc;
}

これは「cssのみ」のソリューションである必要があります。

于 2012-10-27T10:25:12.543 に答える
1

メニューが次のようになっているとしましょう。

<ul class="nav">
  <li onmouseover="this.parentNode.className = 'hoveredpurple';" onmouseout="this.parentNode.className = '';"><span>item1</span>
  </li>
  <li onmouseover="this.parentNode.className = 'hoveredred';" onmouseout="this.parentNode.className = '';"><span>item2</span>
  </li>
</ul>

次に、item1 または item 2 のホバー時にメニュー全体の色を変更したい場合は、次のような css を使用します:

.hoveredred{
   background: red;
}
.hoveredpurple{
   background: purple;
}​

ここに jsFiddle があります: http://jsfiddle.net/XCTcN/1/

CSS4 では、親セレクターを使用できる純粋な CSS でこれが可能になります: http://www.red-team-design.com/meet-the-css4-selectors

于 2012-11-05T01:11:38.087 に答える
1 
i=0;
function hover()
{
var color = new Array("cccccc","999999","474747","4c4c4c");
$('#IDofMenu').css('backgroundColor',color[i]);
i==3?i=0:i++;
}
于 2012-10-27T10:09:46.627 に答える
0

必要に応じて、css3の良さを取り入れることもできます。

.menu {
    background: pink;
    -webkit-transition: background 1s;
    -moz-transition   : background 1s;
    -o-transition     : background 1s;
    transition        : background 1s;
}

.menu:hover {
    background: yellow;
    -webkit-transition: background 1s;
    -moz-transition   : background 1s;
    -o-transition     : background 1s;
    transition        : background 1s;
}
.menu:active {
    background: green;
    -webkit-transition: background 1s;
    -moz-transition   : background 1s;
    -o-transition     : background 1s;
    transition        : background 1s;
}
于 2012-11-09T22:23:55.960 に答える