首页  >  文章  >  web前端  >  为什么我的 div 在悬停时不改变颜色,只有其中的链接改变颜色?

为什么我的 div 在悬停时不改变颜色,只有其中的链接改变颜色?

DDD
DDD原创
2024-11-03 18:43:02348浏览

Why doesn't my div change color on hover, only the link inside it?

在悬停时更改 Div 背景颜色

问:我试图在鼠标悬停在 div 上时更改其背景颜色。我尝试使用下面提供的 CSS 代码,但只有 div 内的链接改变颜色。如何让整个 div 在悬停时改变颜色?

CSS 代码:

the div {background: white;}
the div a:hover {background: grey; width: 100%; display: block; text-decoration: none;}

A:CSS 代码中的“a:hover”专门针对 标签,仅导致链接在悬停时改变颜色。要更改整个 div 的背景颜色,您需要使用“the div:hover”。这是更正后的代码:

the div {background: white;}
the div:hover {background: grey;}

此外,如果您希望整个 div 充当链接,您可以在其周围添加 标签以及所需的链接地址:

<a href="link_address">
  <div style="background: white;">
    ...
  </div>
</a>

请注意,如果您只想更改特定的 div,您可以在 HTML 中为其指定 ID 或类,并在您的 HTML 中使用该标识符来定位它CSS。

以上是为什么我的 div 在悬停时不改变颜色,只有其中的链接改变颜色?的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn