Search code examples
javascriptcssreactjssassstyles

How can I active several hover event in some separated sibling components simultaneously by hovering on each of them?

I have three separated React component (a button, an image and a paragraph for example) which each of them has its hover event styled in its separated scss file. All of the components are sibling. I want each of these hover events works by hover on any of other elements. Is it possible by scss or I should do it by React JS? How should I do that?

Solution

  • You could achieve that with :hover css pseudo-class on the parent element, and specify the ruleset with appropriate child selector. For example:

    div:hover img {
  /* some styling */
}

div:hover p {
  /* some styling */
}

div:hover button {
  /* some styling */
}
    <div>
  <img />
  <p>some paragraph</p>
  <button>Press me!</button>
</div>

    You can read more about :hover here, and about css selectors here