There is no CSS effect

1

I'm developing a web application and I would like the mouse to move the icons to change color and not show that line underneath the icons but houver does not work.

HTML

  <div class="header-fixed">
<div class="container">
    <div class="row">
        <div class="col-xs-4 col-sm-4 text-left">
            <div class="icons_moveis"><a class="fa fa-home"></a></div>
        </div>
        <div class="col-xs-4 col-sm-4 text-center">
            <div class="icons_moveis"><a class="fa fa-user"></a></div>
        </div>
        <div class="col-xs-4 col-sm-4 text-right">
           <div class="icons_moveis"><a class="fa fa-shopping-cart"></a></div>
        </div>
    </div>
</div>

CSS

.icons_moveis:hover{

  color: yellow;
 }

    
asked by anonymous 16.10.2017 / 01:53

1 answer

3

You should set the yellow color for the child element (which in its case is the element a), inside the div with the class icons_moveis.

.icons_moveis a:hover{
  color: yellow;
  text-decoration: none;
 }
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
 <div class="header-fixed">
<div class="container">
    <div class="row">
        <div class="col-xs-4 col-sm-4 text-left">
            <div class="icons_moveis"><a class="fa fa-home"></a></div>
        </div>
        <div class="col-xs-4 col-sm-4 text-center">
            <div class="icons_moveis"><a class="fa fa-user"></a></div>
        </div>
        <div class="col-xs-4 col-sm-4 text-right">
           <div class="icons_moveis"><a class="fa fa-shopping-cart"></a></div>
        </div>
    </div>
</div>
    
16.10.2017 / 02:12