CSS 在 a:hover 上更改 li 的背景图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3101215/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
change background image of li on an a:hover
提问by Rick de Graaf
I have a menu:
我有一个菜单：
<div id=menu>
<ul=navigation>
<li><a href=>Home</a></li>
</ul>
</div>
With the sliding doors technique I want to create my button (containing rounded corners at the bottom.)
使用滑动门技术，我想创建我的按钮（底部包含圆角。）
I can get this to work, by hovering the a and the li. But the li is bigger, and if I hover over the li, without hovering the a, only the background image for the li shows.
我可以通过将 a 和 li 悬停来使其工作。但是 li 更大，如果我将鼠标悬停在 li 上，而不将鼠标悬停在 a 上，则只会显示 li 的背景图像。
Now I'm wondering if there is a way to connect the hover of the li and the hover of the a within css. I rather fix this problem without using javascript.
现在我想知道是否有办法将 li 的悬停和 css 中的 a 悬停联系起来。我宁愿在不使用 javascript 的情况下解决这个问题。
Googleing didn't helped me further. I'm guessing this isn't possible, but I wanted to be sure before trying other options.
谷歌搜索并没有进一步帮助我。我猜这是不可能的，但我想在尝试其他选项之前确定。
Thanks in advance for any advice/help/suggestions.
提前感谢您的任何建议/帮助/建议。
回答by Scott
From what I gather you cannot do what you are after in the way you have described it.
据我所知，你无法按照你所描述的方式去做你所追求的事情。
However what I would do is make the "a tag" display as block and set the width and height to fill the "LI" that way you can use a:hover and change the whole bg which makes it look like the LI is changing
但是，我要做的是将“a 标签”显示为块并设置宽度和高度以填充“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;
}
also use some padding to sit the text in the right place within the "LI" and remove any padding from the "LI"
还使用一些填充将文本放置在“LI”内的正确位置，并从“LI”中删除任何填充
li:hover is not supported without JS in older versions of IE so using a:hover instead provides better cross browser compatability
li:hover 在旧版本的 IE 中不支持 JS，因此使用 a:hover 提供更好的跨浏览器兼容性
回答by Sam152
You can do this simply with:
你可以简单地做到这一点：
<div id=menu>
<ul>
<li><a href=>Home</a></li>
</ul>
</div>
Then in your CSS:
然后在你的 CSS 中：
#menu ul li:hover{
background-image:url(newimage);
}
If you require IE6 compliance, just make your links fill the entire width of the UL's.
如果您需要符合 IE6，只需让您的链接填满 UL 的整个宽度。
#menu ul li a:link, #menu ul li a:visited{
display:block;
width:999px; <-- enter pixels
height:999px; <-- enter pixels
}
then modify the background image normally with:
然后正常修改背景图像：
#menu ul li a:hover{
background-image:url(newimage);
}
回答by petraszd
#menu li {
/* normal li style */
}
#menu li a {
/* normal a style */
}
#menu li:hover {
/* hover li style */
}
#menu li:hover a {
/* hover a style */
}
Will not work with IE6...
不适用于 IE6...
