html, div, css - 悬停动作和背景图片改变答案

【问题标题】：html, div, css - hover action and background image changinghtml, div, css - 悬停动作和背景图片改变
【发布时间】：2010-11-30 11:46:34
【问题描述】：

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

它可以工作，但是当鼠标在它上面时，bg-image 没有改变，为什么？

【问题讨论】：

标签： html css background hover

【解决方案1】：

您可以为您的 div 设置一个锚元素，然后使用 a:hover:

<div id="blah">
<p> <a href="#"></a></p>
</div>

然后是你的 CSS

#blah a:hover {
 background-image: url(myImage.jpg);
}

【讨论】：

【解决方案2】：

使用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>

我使用了背景颜色，但同样适用于图像。

【讨论】：

【解决方案3】：

需要注意的是，你不应该将块级元素放在锚点内，锚点是可以设置为显示块的内联元素。正确的层次结构应该类似于 div#footer > a > span#logo 和相应的 css。

【讨论】：

【解决方案4】：

嗯，最直接的问题是#logo 内部没有<a> 元素。更改您的第二条规则以定位正确的元素将“解决”这个问题：

#footer a:hover
{
    background-image: url(../images/logo_h.png);
}

编辑：
正如 cmets 中指出的那样：

第一条规则的样式应该是应用于 A 元素和#logo DIV 应该被删除，因为它服务于没有任何目的。

这确实是解决您的问题的更好方法，因为它将减少混乱并有助于防止将来出现进一步的麻烦。（感谢@Julian 的澄清）

【讨论】：

反对者：有什么特别的原因吗？这允许将样式应用于<a> 标记，而无需更改 HTML。
不是匿名投票者，但他们可能认为提议的解决方案没有遵循最佳实践。我会 +1 你只是为了鼓励他们下次说出来。 :)
@Donut：除了第一个背景应用于 div。这是可怕的设计，纵容它是个坏建议。第一条规则的样式应该应用于 A 元素，并且应该删除#logo DIV，因为它没有任何用途。我很抱歉投了反对票，但我真的厌倦了到处出现的快速而肮脏的解决方案：他们只是通过不强调真正的问题（即：DOM 中不必要的混乱）来承诺未来来自 OP 的更多问题.
@Julian 感谢您的澄清。

【解决方案5】：

您已将悬停图像应用于<a> 元素。您的div#logo 中没有<a> 元素。

【讨论】：

【解决方案6】：

背景图像最初分配给#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);
}

【讨论】：

又挖到了！我需要更快地打字。