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?
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