title: Change Parent Background on Child Hover
body: <p>so i have this code:</p>
  
  <pre><code>import React, {Component} from 'react';
  import '../../styles/css/Home.css';
  import $ from 'jquery';
  
  export default class Home extends Component {
  
    render(){
      return(
        &lt;div className="menu"&gt;
          &lt;div className="middle"&gt; 
            &lt;div className="menu-item btn-sobre"&gt;&lt;/div&gt;
            &lt;div className="menu-item btn-questionario"&gt;&lt;/div&gt;
            &lt;div className="menu-item btn-estresse"&gt;&lt;/div&gt;
            &lt;div className="menu-item btn-depressao"&gt;&lt;/div&gt;
            &lt;div className="menu-item btn-ansiedade"&gt;&lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
  
      $(document).ready(function() {
        $(".btn-sobre").on("mouseover", function() {
              $(".menu").css("background-color", "red")
          }).on("mouseout", function() {
              $(".menu").css("background-color", "white")
          });
      });
    }
  }
  </code></pre>
  
  <p>i'm trying to change the "menu" background when i hover any "btn-*" class, but it doesn't work</p>
  
  <p>what can i do in that case (avoiding jquery if possible)?</p>