title: How to change glyph icon color on hover inside div tag?
body: <p>I want to show different color to glyph icon on hover.</p>
  
  <p>This is my code:</p>
  
  <pre><code>&lt;div class="col-xs-3 col-lg-3 text-center span-hover" style="height:50px;border-right: 1px solid #fff;" data-target="#myCarousel" data-slide-to="1"&gt;
        &lt;span class="glyphicon glyphicon-globe"&gt;&lt;/span&gt;
        &lt;span class="hidden-xs"&gt;&amp;nbsp;TRADING&lt;/span&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>css</p>
  
  <pre><code>.span-hover:hover {                
      background-color: rgba(0,0,0,0.4);
      color:white;
  }
  .glyphicon
  {
      font-size: 25px;
      color:red;
  }
  .glyphicon:hover
  {
      color:#44c5ff;
  }
  </code></pre>
  
  <p>When user place the cursor on div tag,Now it's only changing text color.But I want to change text color:white and at the same time glyph icon color:#44c5ff;</p>
  
  <p><code>.glyphicon:hover</code> it's working when user exactyly place cursor on glyphicon. But not in div tag. </p>
  
  <p>Thanks</p>