仅使用 CSS：在悬停时更改 div 的背景颜色答案

【问题标题】：Using CSS only: change a div's background color on hover仅使用 CSS：在悬停时更改 div 的背景颜色
【发布时间】：2011-11-19 22:18:50
【问题描述】：

我有一个 div，它是指向另一个页面的链接。当有人将鼠标悬停在 div（即链接）上时，我希望整个 div 的背景颜色变为蓝色。我想在 CSS 中完成这一切，因为 javascript 可能不适用于所有人。

我的问题：我下面的代码尝试这样做，链接工作正常，但是当我将鼠标悬停在 div 上时，背景不会改变颜色。您认为我做错了什么以及如何解决此问题以使 div 在悬停时更改背景颜色？

我有一种感觉，我应该将链接（a 元素）放在 div 内部（而不是外部），但我永远无法让 a 以这种方式延伸到 div 的整个空间。

<html>
<head>
    <style type="text/css">
    <!--
        body        { background-color: RGB(218,238,248); }
        #rentalAnnc { margin-top: 5%; border-color: #99CCFF; padding-left: 10px; padding-right: 10px;
                      border-width:thin; border-style:solid; border-right-width:thick;
                      border-bottom-width:thick; background-color: #FFFFFF; width: 300px; }

        /* Using pure CSS I am trying to make the background color of the div renatalAnnc have a blue background when we hover over it*/
        .sidebarLink { color: #000000; text-decoration: none; }
        .sidebarLink a:hover { background-color: blue; }

        /* The following on works in Firefox not IE! :( #rentalAnnc:hover { background-color: blue; } */
    -->
    </style>
</head>
<body>

    <a class="sidebarLink" href="facilitiesForHire.html">
        <div id="rentalAnnc">
            <p>We have a range of Education Facilities available for lease & hire</p>
        </div>
    </a>

</body>
</html>

【问题讨论】：

<div> 中的 <a> 不是有效的 HTML。所以浏览器行为在任何方面都是不确定的/不标准的。 validator.w3.org.
@BalusC：HTML5 允许在<a> 中使用<div>。
@mu 是：是这样吗？我落后于时代了。
@Wesley：是的，检查 BalusC 链接到的验证器（只要确保在选项中指定 HTML5）。当然，假设浏览器理解 HTML5 是一个冒险的提议。
@muis：OP 没有显示 HTML5 文档。这是一个无文档类型的文档。

标签： html css

【解决方案1】：

我确定有点晚了，但我最近一直在研究这个问题，我认为更好的解决方案是：

<style type="text/css">
    body        { background-color: RGB(218,238,248); }
    #rentalAnnc { margin-top: 5%; border-color: #99CCFF; padding-left: 10px; padding-right: 10px;
                  border-width:thin; border-style:solid; border-right-width:thick;
                  border-bottom-width:thick; width: 300px; }
    a.sidebarLink div { color: #000000; text-decoration: none; background-color: #FFFFFF;}
    a.sidebarLink:hover div { background-color: blue; }
</style>

<a class="sidebarLink" href="facilitiesForHire.html">
    <div id="rentalAnnc">
        <p>We have a range of Education Facilities available for lease & hire</p>
    </div>
</a>

注意：rentalAnnc div 的样式中没有背景色。这只是链接样式。

这样，链接完全覆盖了整个 div，而不仅仅是它的一部分。此外，任何应用于 div 的背景图像（例如，具有透明区域以显示背景颜色）仍将显示！

【讨论】：

【解决方案2】：

将 <!DOCTYPE html> 添加到页面顶部以使其成为 HTML5 文档并使用注释掉的 #rentalAnnc:hover { background-color: blue; } 规则。在<a> 中包含<div> 在 HTML3/4 中是无效的，但在 HTML5 中显然是有效的（免责声明：HTML5 标准仍然没有确定性）。添加正确的文档类型和注释掉的规则后，您当前的问题（以及许多其他（未来？）布局相关的问题）应该在 MSIE 中得到解决。

不要忘记在添加文档类型后修复其他http://validator.w3.org 错误，例如缺少标题等。无效 HTML 上的浏览器行为未确定。

【讨论】：

【解决方案3】：

您应该将<a> 放在<div> 中。如果您希望它横跨整个空间，请将display: block 添加到其样式中。

<div id="rentalAnnc">
    <a class="sidebarLink" href="facilitiesForHire.html">
        <p>We have a range of Education Facilities available for lease and hire</p>
    </a>
</div>

a.sidebarLink { color: #000000; text-decoration: none; display: block; }
a.sidebarLink:hover { background-color: blue; }

【讨论】：

【解决方案4】：

:hover 对旧版浏览器和 IE 中的非锚元素的支持不是很好，因此您可以将悬停伪类附加到 <a> 并使用简单的后代选择器：

a:hover #rentalAnnc { background-color: blue; }

【讨论】：

这实际上可能还不够，它将在a:hover 上触发，而不是在#rentalAnnc:hover 上触发。因此，如果您的<a> 元素大于您的#rentalAnnc，则当鼠标移入该元素时，您不会获得“交错”悬停效果，但它至少可以在 IE6 和 7 的低于标准 :hover 的情况下工作支持。