title: CSS: + selector not working when hover on child
body: <p>I know this question is ask many time before but i didn't get the answers as i expected.... I am trying to hover on <strong>.h4size</strong> and effect on .<strong>fsize</strong> i use below css its not working...</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>  &lt;div class="col-lg-3 col-md-3 col-sm-6 col-xs-12"&gt;
                            &lt;div class="div-square"&gt;
                                 &lt;a href="product.php" &gt;
                              &lt;i class="fa fa-qrcode fa-3x fsize"&gt;&lt;/i&gt;
                            &lt;h4 class="h4size"&gt;Saloon Product&lt;/h4&gt;
                            &lt;/a&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.h4size:hover .fsize {
     color: #c90000;
      text-shadow: 4px 6px 3px #202020;
  }
  </code></pre>
  
  <p><strong>i also tried</strong></p>
  
  <pre><code>.div-square .fsize .h4size:hover + .div-square .fsize {
      color: #c90000;
      text-shadow: 4px 6px 3px #202020;
  }
  </code></pre>
  
  <p>its also not working</p>