更改子悬停时的父背景答案

【问题标题】：Change Parent Background on Child Hover更改子悬停时的父背景
【发布时间】：2018-10-25 12:16:14
【问题描述】：

所以我有这个代码：

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

当我悬停任何“btn-*”类时，我正在尝试更改“菜单”背景，但它不起作用

在这种情况下我能做什么（如果可能，避免使用 jquery）？

【问题讨论】：

你可以使用类似$("div[class^='btn-']")

标签： javascript jquery html css reactjs

【解决方案1】：

不要将 jquery 与 react 混用

以下是仅使用 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>
    );
  }

【讨论】：

【解决方案2】：

如果您使用的是 jquery。您可以使用此代码，这对您有用。谢谢。

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

【讨论】：

【解决方案3】：

您可以为此使用组件的状态。并创建一个连接到您的菜单 div 的样式变量。

有关反应状态的信息：https://reactjs.org/docs/state-and-lifecycle.html

使用反应鼠标事件来触发组件中的一个函数，并给它你想要使用的颜色（一个字符串）。您需要将 this 和颜色绑定到您的函数才能使其工作。

更多关于反应事件：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>
    );
  }
}

【讨论】：