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

2

给这两个列表项一个唯一的类名，然后为它们指定适当的 CSS。

CSS：

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;}
li.support > a:hover { background-url(path_to_image_for_support.png); }
li.web-design > a:hover { background-url(path_to_image_for_web_design.png); }

HTML：

<ul>
<li class="support"><a href="#">Support</a></li>
<li class="web-design"><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>
于 2013-11-12T20:42:05.197 回答
1

使用 Javascript。代替班级，使用“ID”并为每个人分配一个数字。然后创建一个将使用的 Javascript 函数：

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

完毕。

于 2013-11-12T20:42:59.960 回答