Question

So I have CSS style

.style-a {

}

.style-b {

}

And now I want to make my element to have difference styles when hovering or out. Psudo like:

.my-class {
  .style-a here
}

.my-class:hover {
  .style-b here
}

I cannot change the style-a and style-b because many other elements are dependent on those two and it will be bothering to change them. How can I achieve this functionality without change style-a and style-b and not using JavaScript?

Answer 1

If .style-a, and .style-b are both children of .my-class, you can use:

.my-class .style-a {
    // style here
}

.my-class:hover .style-b {
    // style here
}