CODEWITHSUNDEEP
javascriptreactjs
Diagathe Josué
Diagathe Josué

Reputation: 11976

CSS - How make cursor : pointer when hover a parent which is an another component in ReactJS?

I'm trying to push some interactivity in nested component in ReactJS.

Here a snippet to test the code.

Here my NesterComponent.js : 

<div {a general div}> 
      <div className={style.displayer} > 
        <IncludedComponent/> 
      </div>
</div>

here my IncludedComponent.js: 

    <div>
          <div className={style.dish_footer}>
              <div onClick={this.addArticle} className={style.add}> // this is the div that I want to style and add some interactivity on, it's a pretty greatly nested div ^^ </div>
          </div> 
   </div>

then you obtain something like this:

enter image description here

How add CSS hovering in a such nested div ? any hint would be great, Thanks

Upvotes: 0

Views: 1739

Answers (1)

Ben Hart
Ben Hart

Reputation: 167

.parent:hover .child {
cursor:pointer;
}

you can import this css in either the parent or child component.

Here a demo.

EDIT: seeing you just want the nested component to have the hover effect. here is the jsx you should use for the nested component

<div className="parent">
      <div className={style.dish_footer}>
          <div onClick={this.addArticle} className={style.add + " child"}>
          </div>
      </div>

now include the css above and don't worry about the nesting. in css you just select the class you want to hover, and the child class you want to style when that parent is hovered.

Upvotes: 1

Related Questions