Html 仅使用CSS：更改div'；鼠标悬停时的背景色_Html_Css

Html 仅使用CSS：更改div'；鼠标悬停时的背景色

html css

Html 仅使用CSS：更改div'；鼠标悬停时的背景色,html,css,Html,Css,我有一个div，它是指向另一个页面的链接。当有人悬停在div（即链接）上时，我希望整个div的背景颜色变为蓝色。我想在CSS中完成这一切，因为javascript可能不适合所有人我的问题：我下面的代码尝试这样做，链接工作正常，但当我将鼠标悬停在div上时，背景颜色不会改变。你认为我做错了什么&你认为我如何解决这个问题，使div改变悬停时的背景色我有一种感觉，我应该将链接（a元素）放在div内部（而不是外部），但我永远无法让a以这种方式延伸到div的整个空间 <html> <

我有一个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>

：hover

对旧浏览器和IE中的非锚元素的支持不是很好，因此您可以将hover psuedo类附加到

，并使用一个简单的后代选择器：

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

：hover

对旧浏览器和IE中的非锚定元素的支持不是很好，因此您可以将hover psuedo类附加到

并使用简单的后代选择器：

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

你应该把


a、 侧边栏链接{color:#000000；文本装饰：无；显示：块；}
a、 侧边栏链接：悬停{背景颜色：蓝色；}

你应该把


a、 侧边栏链接{color:#000000；文本装饰：无；显示：块；}
a、 侧边栏链接：悬停{背景颜色：蓝色；}

将

添加到页面顶部，使其成为HTML5文档，并使用未注释的

\rentalanc:hover{background color:blue；}

规则。添加doctype后，在

中出现
错误，例如缺少标题等。无效HTML上的浏览器行为未确定。
将
添加到页面顶部，使其成为HTML5文档，并使用未注释的\rentalanc:hover{background color:blue；}
规则。添加doctype后，在中出现
错误，例如缺少标题等。无效HTML上的浏览器行为尚未确定。
我肯定有点晚了，但我最近一直在研究这个问题，我认为更好的解决方案是：
<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>


正文{背景色：RGB（218238248）；}
#Rentalanc{页边距顶部：5%；边框颜色：#99CCFF；左侧填充：10px；右侧填充：10px；
边框宽度：薄；边框样式：实心；边框右侧宽度：厚；
边框底部宽度：厚；宽度：300px；}
a、 侧边栏链接div{color:#000000；文本装饰：无；背景色：#FFFFFF；}
a、 侧边栏链接：悬停div{背景色：蓝色；}

注意：Rentalanc div的样式中没有背景色。这只是链接样式
这样，链接就完全覆盖了整个div，而不仅仅是其中的一部分。此外，应用于div的任何背景图像（例如，背景颜色的透明区域）仍将显示
 我肯定有点晚了，但我最近一直在研究这个问题，我认为更好的解决方案是：
<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>


正文{背景色：RGB（218238248）；}
#Rentalanc{页边距顶部：5%；边框颜色：#99CCFF；左侧填充：10px；右侧填充：10px；
边框宽度：薄；边框样式：实心；边框右侧宽度：厚；
边框底部宽度：厚；宽度：300px；}
a、 侧边栏链接div{color:#000000；文本装饰：无；背景色：#FFFFFF；}
a、 侧边栏链接：悬停div{背景色：蓝色；}

注意：Rentalanc div的样式中没有背景色。这只是链接样式
这样，链接就完全覆盖了整个div，而不仅仅是其中的一部分。此外，应用于div的任何背景图像（例如，背景颜色的透明区域）仍将显示
 @BalusC:HTML5中的
允许
中的
@mu是这样的吗？我在《泰晤士报》上落后了。@Wesley：是的，检查BalusC链接到的验证器（请确保在选项中指定HTML5）。当然，假设浏览器理解HTML5是一个危险的命题。@muis:OP没有显示HTML5文档。这是一个无文档类型的文档。@BalusC:HTML5中的
允许
中的
是这样的吗？我在《泰晤士报》上落后了。@Wesley：是的，检查BalusC链接到的验证器（请确保在选项中指定HTML5）。当然，假设浏览器理解HTML5是一个危险的命题。@muis:OP没有显示HTML5文档。这是一个无文档类型的文档。实际上，这可能还不够，它将在a:hover
上触发，而不是在#rentalanc:hover
上触发。因此，如果你的
元素大于你的#rentalanc
，当鼠标移动到元素中时，你不会得到“交错”的悬停效果，但它至少可以绕过IE6和IE7的子参数：悬停支持。这实际上可能还不够，它会在a:hover
上触发，不特别是在#rentalanc:hover
上。因此，如果您的
元素大于#rentalanc
，当鼠标移动到元素中时，您将不会获得“交错”悬停效果，但它至少可以绕过IE6和IE7的子标准：悬停支持。