How to change color of a tag when i hover over a div-CodePudding

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 ><a href="#">TEXT</a></div>

Nothing really worked out for me...

I tried these weird, a:hover .div, but it didn't work.

CodePudding user response：

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 :)

CodePudding user response：

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!

CodePudding user response：

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: yellow;
}
.example a:hover {
    color: black;
    background-color: red;
}

CodePudding user response：

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

CodePudding user response：

Do this;

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

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

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