title: Hover in ReactJS
body: <p>I have two components, let's say Parent and Child components</p>
  
  <pre><code>    import Child from "./Child";
       function Parent(){
        return(
         &lt;div&gt;
           &lt;Child name="text1" /&gt;
           &lt;Child name="text2" /&gt;
           &lt;Child name="text3" /&gt;
        &lt;/div&gt;
       );
      }
       export default Parent;
  </code></pre>
  
  <pre><code>function Child(props){
    return(
     &lt;div className="text-name"&gt;{props.name}&lt;/div&gt;
    );
   }
    export default Child;
  </code></pre>
  
  <pre><code>    .text-name{ color:red;}
      .text-name:hover{color: blue;}
  </code></pre>
  
  <p>Now  when I hover one of the Child component current component hovered blue. but how can I change my code in this way so that if i hover first child color should change on blue, for second one green, and for last one yellow.</p>