0

ドロップダウン メニューがあり、各メイン メニュー タブをマウスでホバーすると特定の画像に変更したいと考えています。

ul {list-style: none;padding: 0px;margin: 0px;}
ul li {display: block;position: relative;float: left;}
li ul {display: none;}
ul li a {display: block; text-decoration: none; color: #fff;}
ul li a:hover {}
li:hover ul {display: block; position: absolute;}
li:hover li {float: none;}
li:hover a {background-image:url(rf3.gif);}
li:hover li a:hover {background: #fec96b; color:#fff;}

<ul>
<li><a href="#">Support</a></li>
<li><a href="#">Web Design</a>
<ul>
<li><a href="#">HTML</a></li>
</ul>
</li>
<li><a href="#">Content Management</a>
<ul>
 <li><a href="#">Joomla</a></li>
</ul>
</li>
</ul>

「サポート」や「Web デザイン」などのタブをそれぞれ独自の画像に変更してほしいです。それらは異なります。

exにクラスを追加してみました。

<li class="hover"><a href="#">Support</a></li>

しかし、成功しませんでした。

4

2 に答える 2

1

Javascript を使用します。クラスの代わりに「ID」を使用し、それぞれに番号を割り当てます。次に、以下を使用する JavaScript 関数を作成します。

document.getElementById('[line number]').style.backgroundColor = "[desired background color]";

終わり。

于 2013-11-12T20:42:59.960 に答える