title: how make my siblings elements render a black color when hovering an element?
body: <p>I'm working with CSS with Reactjs. I got two sibling element  : my logo and a text beside.
  I'm trying to make than when I'm hovering the logo the text become black. 
  So far I have don't succeed.</p>
  
  <p>I have tried to share the className, but it fails. </p>
  
  <p>Here my file.js : </p>
  
  <pre><code>export default () =&gt; {
    return (
      &lt;div className={style.logo_flex}&gt;
        &lt;div&gt;
        &lt;Link to="/"&gt; 
        &lt;img className={style.logo}  src={Logo} alt=""/&gt;
        &lt;/Link&gt;
        &lt;/div&gt;
        &lt;Link to="/"&gt; 
        &lt;p className={style.brandName}&gt; Coding &lt;/p&gt;  
        &lt;/Link&gt;
      &lt;/div&gt;
    )
  }
  </code></pre>
  
  <p>Here my file.css: </p>
  
  <pre><code>/* Logo */
  
  a{ 
      text-decoration: none;
      color: grey;
  }
  a:active{ 
      border:none; 
  }
  
  a:visited{ 
      color:grey;
  }
  
  
  .logo_flex{ 
      height: 100%;
      display: flex; 
      flex-direction: row;
      align-items: center; 
  }
  .logo_flex:hover{
      color:black;
  }
  .logo{      
      left: 7%;
      top: 0.2em;
      height: 2.2em;  
  }
  
  
  p, div { 
      display: inline-block;  
  }
  
  .brandName{ 
      margin-left: 1.2em;  
      align-self: center;
  }
  
  .brandName:hover, .logo:hover{ 
      color:black; 
  }
  </code></pre>