Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Preciso fazer com que um menu apareça ao passar o mouse vou citar aqui o css e o jquery/javascript
HTML
<div id="phrase">Uma frase qualquer</div>
<div id="appear">
<a href="#" class="link">Link</a>
<a href="#" class="link">Link</a>
<a href="#" class="link">Link</a>
<a href="#" class="link">Link</a>
<a href="#" class="link">Link</a>
<a href="#" class="link">Link</a>
</div></div>
JQUERY
<script type="text/javascript">
$ (function() {
$('#phrase').mouseover(function(){
$('#appear').slideDown(1000);
});
});
$ (function () {
$('#appear').mouseout(function(){
$('#appear').slideUp(1000);
});
});
</script>
CSS
#appear {
width:254px;
display:none;
background:#000;
}
a.link {
background:#fff;
text-align:center;
color:#000;
width:250px;
height:auto;
padding:2px;
margin-bottom:2px;
font-family: 'Averia Libre', cursive;
-webkit-transition:all 0.6s ease-out;
-moz-transition:all 0.6s ease-out;
transition:all 0.6s ease-out;
float:left;
font-size:12px;
}
a.link:hover {
-webkit-opacity:.6;
-webkit-transition:all 0.7s ease-out;
-moz-opacity:.6;
-moz-transition:all 0.7s ease-out;
opacity:.6;
transition:all 0.7s ease-out;
}
Explicando: Eu quero que quando eu passe o mouse na div "phrase" apareça a div "appear" e ela fique aparecendo por enquanto o mouse estiver sobre a frase ou os links, mas quando eu passo o mouse sobre a frase e vou passar o mouse nos links eles voltam a ficar "display:none;".
Alguém tem uma solução para isso?? Por favor é urgente!
Fecha, criei um monte igual sem querer :)
ADD DETALHES: Eu descobri que ao retirar o mouse do <a href="#" class="links">Link</a> o menu fecha. Eu preciso que ele só feche apos eu retirar o mouse da div pai, no caso a div appear. Alguém me ajuda???
Carregando comentários...