下拉菜单 <li> 悬停改变背景图片

Posted

技术标签:

【中文标题】下拉菜单 <li> 悬停改变背景图片【英文标题】:Drop down menu <li> hover changing background image 【发布时间】:2013-11-25 04:55:12 【问题描述】:

我有一个下拉菜单,我希望每个主菜单选项卡在将鼠标悬停在其上时更改为特定图像。

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>

但没有成功。

【问题讨论】:

【参考方案1】:

给这两个列表项一个唯一的类名,然后为它们指定适当的 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>

【讨论】:

我遇到了一个问题:对于“网页设计”,当菜单展开时,整行都有相同的重复背景.. 使用直接后代选择器 ( > )。我已经相应地更新了我的答案的 CSS 部分的最后两行。然后,CSS 应该只适用于 li 与类的直接后代的 a 元素。【参考方案2】:

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

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

完成。

【讨论】:

到底为什么要使用 javascript 来改变表现形式?这正是 CSS 的意义所在!

以上是关于下拉菜单 <li> 悬停改变背景图片的主要内容,如果未能解决你的问题,请参考以下文章

下拉菜单:使用 jQuery 悬停时无限滑动

html 怎么做鼠标悬浮菜单上的选项能出现下拉菜单

CSS 菜单在悬停时移动

仅当悬停在 li 中的 span 上时才显示下拉菜单

CSS下拉菜单打开:悬停

如何在 IE 中覆盖 Twitter Bootstrap 下拉悬停