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代替提供更好的跨浏览器兼容性

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);
}

Answer 3

#menu li {
  /* normal li style */
}

#menu li a {
  /* normal a style */
}

#menu li:hover {
  /* hover li style */
}

#menu li:hover a {
  /* hover a style */
}

无法使用IE6 ......

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

3 个答案: