代码之家 › 专栏 › 技术社区 › Rick de Graaf

更改a:悬停时li的背景图像

sliding-doors css

5

Rick de Graaf · 技术社区 · 15 年前

我有菜单:

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

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

我可以通过悬停A和LI来让它工作。但李更大,如果我悬停在李上,而不悬停的A,只有李的背景图像显示。

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

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

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

3 回复 | 直到 15 年前

1

7

Scott 15 年前

据我所知,你不能按照你描述的方式去做你所追求的。

不过,我要做的是将“a tag”显示为块,并设置宽度和高度以填充“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提供更好的跨浏览器兼容性

2

5

Sam Becker 15 年前

您只需:

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

3

4

petraszd 15 年前

#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…