Menu
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.
635
asked Dec 06 '25 20:12
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> .example:hover a{
color:black;
}
.example:hover {
background:red;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With