How can I target other css class in another class?

user_15823968 0
Viewed 419

So I am making a navbar with react , I use three components for menu bar text logo and buttons. I give background of navbar to transparent and components to black. When hover components background turn white and navbar to white. The problem is I used three files for each component and I want to make the components color to turn white when the navbar is hovered , I don't want the components to change color when only it is hovered. How can I do that ? How can I target the components class Name in the Navbar hover class ?

styled-components reactjs css
2 Answers

So, assume that the wrapping element of the navbar is called emergency-menu-page, we can simply use the :hover selector to change the background of every div, span, p (etc...) inside of emergency-menu-page. I use the !important property to force an override to existing styles (before the hover). You may not need the !important property, depending on how your existing styles are structured.

#emergency-menu-page:hover{
  div, span, p{
  background-color: red !important;
  }
}
user_59598800

If the component is outside the navbar, you can't achieve your desired goal by using SCSS or CSS (or whatever you use).

I suggest you use Query or JS code to add a specific class to the component once you hover over the navbar.

This class should be implemented in your (CSS/SCSS, ...etc) files so it will add the hover style to your component.

user_169502770
Related