html, div, css - 悬停动作和背景图像改变
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1461409/
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
html, div, css - hover action and background image changing
提问by Max Frai
#logo
{
position: relative;
width: 100px;
height: 18px;
float: right;
background-image: url('../images/logo_def.png');
background-repeat: no-repeat;
background-position: 50% 50%;
}
#logo a:hover
{
background-image: url(../images/logo_h.png);
}
It works, but bg-image doesn't change when mouse is over it, why?
它有效，但是当鼠标悬停在 bg-image 上时它不会改变，为什么？
回答by Donut
Well, the immediate problem is that there's no <a>element inside #logo. Changing your second rule to target the correct element will "fix" this problem:
嗯，直接的问题是里面没有<a>元素#logo。更改您的第二条规则以定位正确的元素将“修复”这个问题：
#footer a:hover
{
background-image: url(../images/logo_h.png);
}
Edit:
As was pointed out in the comments:
编辑：
正如评论中指出的那样：
The style of the first rule should be applied to the A element and the #logo DIV should be removed since it serves no purpose whatsoever.
第一条规则的样式应该应用于 A 元素，#logo DIV 应该被删除，因为它没有任何作用。
This is indeed the better fix for your problem, as it will reduce clutter and help prevent further headaches in the future. (thanks to @Julian for the clarification)
这确实是解决您问题的更好方法，因为它将减少混乱并有助于防止将来出现进一步的头痛。（感谢@Julian 的澄清）
回答by Dmitri Farkov
The background-image is originally assigned to #logo. On a:hover the ANCHOR'S background-image is changed. Thus the following would work:
背景图像最初分配给#logo。在 a:hover 上，ANCHOR 的背景图像被更改。因此，以下将起作用：
#logo a
{
position: relative;
width: 100px;
height: 18px;
float: right;
background-image: url('../images/logo_def.png');
background-repeat: no-repeat;
background-position: 50% 50%;
}
#logo a:hover
{
background-image: url(../images/logo_h.png);
}
回答by dnagirl
You've applied the hover image to an <a>element. There is no <a>element in your inside your div#logo.
您已将悬停图像应用于<a>元素。<a>你的里面没有元素div#logo。
回答by JonH
You could style your div to have an anchor element and then use a:hover:
您可以将 div 样式设置为具有锚元素，然后使用a:hover：
<div id="blah">
<p> <a href="#"></a></p>
</div>
Then your CSS
然后你的 CSS
#blah a:hover {
background-image: url(myImage.jpg);
}
回答by jasonevers
It should be noted that you shouldn't put block level elements inside an anchor, which is an inline element that you can set to display block. The correct hierarchy should be something like div#footer > a > span#logowith the corresponding css.
应该注意的是，您不应该将块级元素放在锚点内，锚点是可以设置为显示块的内联元素。正确的层次结构应该类似于div#footer > a > span#logo相应的 css。
回答by yanike
Wouldn't it be simpler to use onMouseOver and onMouseOut javascript functions?
使用 onMouseOver 和 onMouseOut javascript 函数不是更简单吗？
<script type="text/javascript">
function divcolor(){ document.getElementById('div1').style.background='#FFDFA3'; }
function divcolor2(){ document.getElementById('div1').style.background='#FFFFFF'; }
</script>
<div id="div1" onmouseover="divcolor();" onmouseout="divcolor2();">Hover ME and I will highlight for you :)</div>
I used background colors, but the same should work with images.
我使用了背景颜色，但同样适用于图像。
