Show up a div with Hover

Asked

Viewed 361 times

0

I am doing a project and I have to make appear an icon, on each menu link when passing the mouse. I thought to do with JavaScript but I don’t have much experience, so I decided to do 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>
html css div hover

  • Show the code you already have

  • This is the code:

  • <div id="navbar" class="navbar-Collapse Collapse"> <ul class="Nav navbar-Nav navbar-right menu"> <li><a href="#who-we-are" rel="who-we-are">Who We Are</a></li> <li><a href="#what-we-do" rel="o-what-we-do">>What We Do</a></li> <li><a href="portfolio" rel="portfolio">Portfolio</a></li> <li><a href="#customers" rel="customers">Customers</a></li> <li><a class="margin" href="#contactc" rel="contact">Contact</a></li> </ul> </div>

  • You are using Boostrap?

  • Yes I am, I want to bring out the Bootstrap icons.

2 answers

3

I guess the easy way is like 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 the #navbar just so you could see here

2

Good morning!

There are many ways to do this. Since you don’t have Javascript experience, the easiest way to do it with CSS is with the pseudo-element ::before.

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’ve helped!

Browser other questions tagged html css div hover

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