Can we add property to child element by selecting parent element

Question

Can we apply properties to child element when we hover parent element ?,if the code is like this

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

I've a requirement that if we hover on div element then color property to be added to a element..

Answer 1

Yes, you can do that using something like the following in your CSS:

div:hover a {
  color: red;
}

Documentation on hover pseudo-class: https://developer.mozilla.org/en-US/docs/Web/CSS/:hover

Answer 2

You can use css, but it would be advisable to make your parent element identifiable (by attributing a class or and id), as otherwise other similar tags will have the same effect. This way you can do something like this (where i am using a specific class)

<div class="hovereffect"> <a href="#">Hello</a> </div>

div.hovereffect:hover a {
   border:1px solid red;
}