No effect works CSS

Asked

Viewed 353 times

1

I am developing a web application and I would like to move the mouse the icons change color and not show that line under the icons but the houver doesn’t 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;
 }

Page with the icons in which when passing the mouse the icons was to turn yellow.

inserir a descrição da imagem aqui

html css css3

  • It’s possible it’s style overlay. You’ve tried it with color: yellow !important; ? And the hover was supposed to be for the <div> which is what it is, or to the <a> ?

  • supposed to be for the <div> which is what is, or for the <a> not understood ?

  • put color: Yellow ! Port; and did not work

  • You are applying text color to <div> but the <a> probably already has a color set in the style. So probably what you want to do is .icons_moveis a:hover {. But it already depends a little on how you have your styles.

1 answer

3


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

.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>

Browser other questions tagged html css css3

You are not signed in. Login or sign up in order to post.