我正在使用ul li
菜单,当用户超过他们时,我正在尝试为所有li
父母着色。
html
<ul id="jMenu">
<li class="arrow"></li>
<li><a >Category 7.2</a></li>
<li><a>Category 7.2</a></li>
<li><a>Category 7.2</a></li>
<li><a>Category 7.2</a></li>
</ul>
CSS:
#jMenu li a {
padding:10px 25px 10px 20px;
display:block;
background-color: transparent;
color:#6d6e72;
text-transform:uppercase;
cursor:pointer;
font-size:12px;
direction:rtl;
color:#8A8B8E;
}
#jMenu li a:hover {
background-image:url('../images/header/top_menu_over2.jpg');
color:White;
background-repeat:repeat-x;
}
我制作了这个简单的 jQuery 脚本:
$("#jMenu").find("li").hover(function(){
$(this).parents("li").css("background-image","url('images/header/top_menu_over2.jpg');");
}, function(){
$("#jMenu").find("li").parents("li").css("background-color","#f2f2f2")
$("#jMenu").children("li").css("background-color","transparent")
$("#jMenu").find("li").parents("li").css("background-image","none");
});
它适用于 IE,但不适用于 Firefox 或 Chrome。有人知道为什么吗?
谢谢。