5

我有一个菜单：

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

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

通过将 a 和 li 悬停，我可以让它工作。但是 li 更大，如果我将鼠标悬停在 li 上，而不悬停 a，则仅显示 li 的背景图像。

现在我想知道是否有办法连接 li 的悬停和 css 中的 a 的悬停。我宁愿在不使用 javascript 的情况下解决这个问题。

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

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

4

3 回答 3

7

从我收集的信息来看，您无法按照您描述的方式做您所追求的事情。

但是我要做的是将“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”中删除任何填充

在旧版本的 IE 中，如果没有 JS，不支持 li:hover，因此使用 a:hover 可以提供更好的跨浏览器兼容性

于 2010-06-23T11:50:09.707 回答
5

您可以通过以下方式简单地做到这一点：

<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);
}
于 2010-06-23T11:42:14.320 回答
4 
#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...

于 2010-06-23T11:46:35.847 回答