CODEWITHSUNDEEP
javascriptjqueryhtmlcssreactjs
Leonardo Marques
Leonardo Marques

Reputation: 93

Change Parent Background on Child Hover

so i have this code:

import React, {Component} from 'react';
import '../../styles/css/Home.css';
import $ from 'jquery';

export default class Home extends Component {

  render(){
    return(
      <div className="menu">
        <div className="middle"> 
          <div className="menu-item btn-sobre"></div>
          <div className="menu-item btn-questionario"></div>
          <div className="menu-item btn-estresse"></div>
          <div className="menu-item btn-depressao"></div>
          <div className="menu-item btn-ansiedade"></div>
        </div>
      </div>
    );

    $(document).ready(function() {
      $(".btn-sobre").on("mouseover", function() {
            $(".menu").css("background-color", "red")
        }).on("mouseout", function() {
            $(".menu").css("background-color", "white")
        });
    });
  }
}

i'm trying to change the "menu" background when i hover any "btn-*" class, but it doesn't work

what can i do in that case (avoiding jquery if possible)?

Upvotes: 1

Views: 1359

Answers (3)

sjimster
sjimster

Reputation: 1

You could use the state of a component for this. And create a style variable that is connected to your menu div.

Info about react state: https://reactjs.org/docs/state-and-lifecycle.html

Use the react mouse events to trigger a function in your component and give it the color(a string) you want to use. You need to bind this and the color to your function in order for it to work.

More on react events: https://reactjs.org/docs/handling-events.html

class Home extends React.Component {
  
  constructor(){
    this.state = {
      color: "white"
    }
  }
  
  changeColor (color) {
    this.setState({
      color: color
    })
  }
  
  render(){
    let styles = {
      backgroundColor: this.state.color
    }
    return (
      <div className="menu" style={styles}>
        <div className="middle">  
          <div onMouseOver={this.changeColor.bind(this, "#333")} className="menu-item btn-sobre">1</div>
          <div onMouseOver={this.changeColor.bind(this, "#999")} className="menu-item btn-questionario">2</div>
          <div onMouseOver={this.changeColor.bind(this, "#000")} className="menu-item btn-estresse">3</div>
          <div onMouseOver={this.changeColor.bind(this, "#ccc")} className="menu-item btn-depressao">4</div>
          <div onMouseOver={this.changeColor.bind(this, "#666")} className="menu-item btn-ansiedade">5</div>
        </div>
      </div>
    );
  }
}

Upvotes: 0

Videsh Chauhan
Videsh Chauhan

Reputation: 371

if you are using jquery. You can use this code this will work for you. Thank You.

 $(document).ready(function(){
    $('.menu').find('.menu-item').mouseover(function(){
        $(".menu").css("background-color", "white");
    }).mouseleave(function(){
        $(".menu").css("background-color", "red");
    })
});

Upvotes: 0

Kiran Shinde
Kiran Shinde

Reputation: 5982

Don't mix jquery with react

Here is how you can achieve this using only react

import React, {Component} from 'react';
import '../../styles/css/Home.css';

export default class Home extends Component {
  constructor() {
      this.state = {
          parentHover: false
      }
  }
  render(){
    return(
      <div className="menu" style={parentHover ? {"backgroundColor": "red"} : {}}>
        <div className="middle"> 
        <div className="menu-item btn-sobre" onMouseOver={this.state.parentHover = true} onMouseOut={this.state.parentHover = false}></div>
        <div className="menu-item btn-questionario" onMouseOver={this.state.parentHover = true} onMouseOut={this.state.parentHover = false}></div>
        <div className="menu-item btn-estresse" onMouseOver={this.state.parentHover = true} onMouseOut={this.state.parentHover = false}></div>
        </div>
      </div>
    );
  }

Upvotes: 3

Related Questions