css 当我将鼠标悬停在div上时如何更改标记的颜色

kadbb459 于 2023-01-22 发布在其他

关注(0)|答案(5)|浏览(206)

我有这样一个HTML结构
有一个div，里面有一个a标签，我希望当我把鼠标悬停在这个div上时，这个div的背景色会改变，并且它的a标签的颜色会变成黑色。
有没有可能用CSS来做，或者我必须使用js？

<div class="example"><a href="#">TEXT</a></div>

对我来说什么都不管用...
我尝试了这些奇怪的，a：hover + .div，但它没有工作.

5条答案

尝试“a：hover .example”而不是“a：hover + .div”。添加该点只是为了引用类名，如果您只想指向标记，则不需要它：）

解决方案：

.follow:hover {
    background-color: white;
  }

  .follow:hover>a {
    color: black;
    transition: 0.3s ease 0s;
  }

这就是我自己找到的解决办法，如果你们明白我的意思，还是谢谢!

这适用于你的链接。使用a:link你可以改变链接的默认颜色，使用a:visited你可以确保它在你访问链接后保持颜色。
有了a:hovercolor:，你可以在悬停时改变文本本身的颜色，当然background-color只会改变文本的颜色。如果你还有任何问题，请告诉我。

.example a:link, .example a:visited {
    color: yellow;
}
.example a:hover {
    color: black;
    background-color: red;
}

.example:hover a{
    color:black;
 }
 .example:hover {
     background:red;
 }

这样做;

.example:hover {
    background-color: red;
}

.example:hover > a {
    color: black;
}

<div class="example"><a href="#">TEXT</a></div>