Question

我有一个div，它是另一个页面的链接。当有人盘旋在div（即链接）上时，我希望整个div的背景颜色变为蓝色。我想在CSS中完成所有操作，因为javascript可能无法与所有人一起使用。

我的问题：我的代码尝试这样做，链接工作正常但是当我将鼠标悬停在div上时背景不会改变颜色。你觉得我做错了什么？你觉得我怎么能解决这个问题，让div在悬停时改变背景颜色？

我有一种感觉，我应该将链接（一个元素）放在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>

Answer 1

对于旧版浏览器和IE中的非锚元素，

:hover支持不是很好，因此您可以将hover psuedo类附加到<a>，并使用简单的后代选择器：

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

Answer 2

您应该将<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; }

Answer 3

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

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

Answer 4

有点晚我很确定，但最近我一直在看这个，我认为更好的解决方案是：

<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的任何背景图像（例如，透明区域以显示背景颜色）！

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

4 个答案: