How can I target other css class in another class?-CodePudding

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 ?

CodePudding user response：

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;
  }
}

CodePudding user response：

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

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

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

Moreover, onblur "once you unhover the navbar", you ought to remove that class.