Css 在a:悬停上更改li的背景图像

我有菜单：

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

使用滑动门技术，我想创建我的按钮（底部包含圆角）

我可以通过悬停a和li来实现这一点。但是li更大，如果我把鼠标悬停在li上，而不悬停在a上，则只显示li的背景图像

现在我想知道是否有一种方法可以在css中连接li的悬停和a的悬停。我宁愿不使用javascript来解决这个问题

谷歌搜索并没有进一步帮助我。我猜这是不可能的，但我想在尝试其他选择之前确定一下

---

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

您只需通过以下方式即可完成此操作：

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

如果您需要遵守IE6，只需将您的链接填满UL的整个宽度即可

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

---

无法使用IE6…

从我收集的信息来看，您无法按照您描述的方式完成所需的工作

但是，我要做的是将“a标记”显示为块，并设置宽度和高度以填充“LI”，这样您可以使用：悬停并更改整个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:hover在旧版本的IE中不支持没有JS的情况下，因此使用：hover可以提供更好的跨浏览器兼容性

我发现了这一点。Sam152让我思考，检查我的css。我通过改变一些填充物和高度来解决问题，使链接比我的ul更大@不幸的是，斯科特·卡里斯（Scott Carris）不可能以我想要的方式解决问题，而是将更多精力放在解决问题上。谢谢你的帮助！

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

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

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

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

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

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