How to change color of a tag when i hover over a div
Question
I have an HTML structure like this
There's a div with an a tag inside of it. I want it that when I hover over the div, the background color of the div changes and the color of its a tag changes to black.
Is it possible to do it in CSS or do I have to use js?
<div class="example"><a href="#">TEXT</a></div>
Nothing really worked out for me...
I tried these weird, a:hover +.div, but it didn't work.
5 answers
solution1
1 2023-01-21 14:04:14
This works with your link. With the a:link you can change the links default color and with the a:visited you can make sure it keeps the color after you have visited the link.
With the a:hover color: you can change the color of the text itself when hovering and the background-color of course changes the color of just that. Let me know if you have any more questions.
.example a:link, .example a:visited { color: green; }.example a:hover { color: black; background-color: red; }
<html> <body> <div class="example"><a href="#">TEXT</a></div> </body> </html>
solution2
0 2023-01-21 13:30:10
Try "a:hover.example" instead of "a:hover +.div". The point is only added to reference a class name, if you just want to target a tag, you don't need it:)
solution3
0 2023-01-21 14:03:02
Solution:
.follow:hover {
background-color: white;
}
.follow:hover>a {
color: black;
transition: 0.3s ease 0s;
}
Thats the solution i found out for myself, idk if you guys understood what i meant, still thanks!
solution4
0 2023-01-21 15:34:39
.example:hover a{ color:black; } .example:hover { background:red; }
solution5
-1 2023-01-21 13:32:03
Do this;
.example:hover { background-color: red; }.example:hover > a { color: black; }
<div class="example"><a href="#">TEXT</a></div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.