改变li的背景图片a:悬停

Question

我有一个菜单:

<div id=menu>
   <ul=navigation>
     <li><a href=>Home</a></li>
   </ul>
</div>

使用滑动门技术,我想创建我的按钮(底部包含圆角).

我可以通过徘徊a和li来实现这一点.但是li更大,如果我将鼠标悬停在li上而没有悬停a,只有li的背景图像显示.

现在我想知道是否有办法连接li的悬停和css内a的悬停.我宁愿修复这个问题而不使用javascript.

谷歌并没有帮助我.我猜这是不可能的,但我想在尝试其他选择之前确定.

提前感谢您的任何建议/帮助/建议.

Answer 1

从我收集的内容来看,你不能以你所描述的方式完成你所追求的目标.

然而我要做的是将"a tag"显示为块并设置宽度和高度以填充"LI",这样你可以使用a:hover并改变整个bg,这使得它看起来像LI正在改变

li a {
    background:#000 url(images/bg.png) no-repeat 0 0;
    display:block;
    height:20px;
    width:100px;
}
li a:hover {
    background:#fff url(images/bg.png) no-repeat 0 -20px;
}

也可以使用一些填充将文本放在"LI"中的正确位置,并从"LI"中删除任何填充

li:在旧版IE中没有JS不支持hover所以使用:hover代替提供更好的跨浏览器兼容性

Answer 2

您只需使用以下命令即可:

<div id=menu>
   <ul>
     <li><a href=>Home</a></li>
   </ul>
</div>

然后在你的CSS中:

#menu ul li:hover{
   background-image:url(newimage);
}

如果您需要符合IE6标准,只需让您的链接填满UL的整个宽度即可.

#menu ul li a:link, #menu ul li a:visited{
    display:block;
    width:999px;  <-- enter pixels
    height:999px; <-- enter pixels
}

然后正常修改背景图像:

#menu ul li a:hover{
    background-image:url(newimage);
}