como faço aparecer um ícone com o Hover
04/04/2018
0
ola! gostaria de fazer um menu no qual, apenas quado eu passar o mause, por cima apareça um ícone ( exemplo: um telefone em cima do "contato")...
precisai de JS? ou com CSS e HTML já consigo?
precisai de JS? ou com CSS e HTML já consigo?
Pedro Cordeiro
Curtir tópico
+ 1
Responder
Posts
05/04/2018
Fernando Duwe
Oi Pedro,
Com HTML e CSS você já consegue fazer isso.
Esse artigo pode lhe ajudar: https://www.w3schools.com/howto/howto_css_dropdown.asp
Qualquer dúvida, pode entrar em contato.
Com HTML e CSS você já consegue fazer isso.
Esse artigo pode lhe ajudar: https://www.w3schools.com/howto/howto_css_dropdown.asp
Qualquer dúvida, pode entrar em contato.
Responder
09/07/2018
Aparecida Gonçalves
Olá Pedro,
tudo bem?
Você pode tentar apenas com HTML e o Bootstrap. No site do Bootstrap versão 3.3, você encontra na aba Componentes os GlyphIcons.
Veja o HTML abaixo:
<!-- Hover mostrando Imagem do Icone GlyphIcon -->
<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>Hover com Imagem</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<style>
ul{background-color: aliceblue;}
.nav li a .glyphicon{display:none;}
.nav li a:hover .glyphicon{display: inline;}
</style>
<body>
<div class="container">
<div id="navbar" class="navbar-collapse">
<ul class="nav navbar-nav navbar-left menu">
<li><a href="#home" rel="home">Home <span class="glyphicon glyphicon-user"></span></a></li>
<li><a href="#contato" rel="contato">Contato <span class="glyphicon glyphicon-phone-alt"></span></a></li>
</ul>
</div>
</div>
</body>
</html>
Espero ter ajudado!
Cida Luna.
tudo bem?
Você pode tentar apenas com HTML e o Bootstrap. No site do Bootstrap versão 3.3, você encontra na aba Componentes os GlyphIcons.
Veja o HTML abaixo:
<!-- Hover mostrando Imagem do Icone GlyphIcon -->
<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>Hover com Imagem</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<style>
ul{background-color: aliceblue;}
.nav li a .glyphicon{display:none;}
.nav li a:hover .glyphicon{display: inline;}
</style>
<body>
<div class="container">
<div id="navbar" class="navbar-collapse">
<ul class="nav navbar-nav navbar-left menu">
<li><a href="#home" rel="home">Home <span class="glyphicon glyphicon-user"></span></a></li>
<li><a href="#contato" rel="contato">Contato <span class="glyphicon glyphicon-phone-alt"></span></a></li>
</ul>
</div>
</div>
</body>
</html>
Espero ter ajudado!
Cida Luna.
Responder
Clique aqui para fazer login e interagir na Comunidade :)
