Appear a div with hover

Navigation
0

I'm doing a project and I have to make an icon appear in each menu link when hovering the mouse. I thought about doing with JavaScript but I do not have much experience, so I decided to do with CSS , can someone help me? Thank you. 

<div id="navbar" class="navbar-collapse collapse">
   <ul class="nav navbar-nav navbar-right menu">
      <li><a href="#who-we-are" rel="quem-somos">Quem Somos</a></li>
      <li><a href="#what-we-do" rel="o-que-fazemos">O Que Fazemos</a></li>
      <li><a href="#portfolio" rel="portfolio">Portfolio</a></li>
      <li><a href="#customers" rel="clientes">Clientes</a></li>
      <li><a class="margin" href="#contatc" rel="contato">Contato</a></li>
   </ul>
</div>
    
asked by anonymous 17.06.2016 / 14:29

2 answers

3

I think the easiest way is this: 

.nav li a .glyphicon {
  display:none;
}
.nav li a:hover .glyphicon {
  display: inline;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<div id="navbar" class="navbar-collapse">
   <ul class="nav navbar-nav navbar-right menu">
     <li><a href="#who-we-are" rel="quem-somos">Quem Somos <span class="glyphicon glyphicon-user"></span></a></li>
     <li><a href="#what-we-do" rel="o-que-fazemos">O Que Fazemos <span class="glyphicon glyphicon-pencil"></span></a></li>
     <li><a href="#portfolio" rel="portfolio">Portfolio <span class="glyphicon glyphicon-list-alt"></span></a></li>
     <li><a href="#customers" rel="clientes">Clientes <span class="glyphicon glyphicon-globe"></span></a></li>
     <li><a class="margin" href="#contatc" rel="contato">Contato <span class="glyphicon glyphicon-phone-alt"></span></a></li>
   </ul>
</div>

Note that I removed the collapse class from #navbar just so you can see it here

    
17.06.2016 / 16:15
2

Good morning!

There are several ways to do this. Since you have no experience with JavaScript, the easiest way to do with CSS is with the :: before pseudo-element.

In your case, it would look like this: 

a:hover::before {
  content: url('http://www.famfamfam.com/lab/icons/mini/icons/icon_accept.gif');
  margin: 0 10px;
  position: relative;
  top: 3px;
}

I hope I have helped!

    
17.06.2016 / 15:30
Refresh datatable after deleting record Indexing views in MySQL