[Resolvido] Javascript/Jquery?

[ArthurMVA 0]

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

[William Bruno 1501]

no lugar de mouseout, use mouseleave()

[ArthurMVA 0]

Dá na mesma, quandro eu saio do

<a href="#" class="link">LINK</a>[code] ele continua fechando, eu preciso que ao passar do link para o outro continue e só feche quando eu retirar da div appear.

[Maujor 144]

Use mouseleave conforme recomendado pelo Bruno e adicione a seguinte declaração CSS:

#appear {
width:254px;
overflow:auto; /* ADICIONE ESSA DECLARAÇÃO */
display:none;
background:#000;
}

Assim vai funcionar!

 

Nota: Tem um fechamento de DIV a mais no fim do seu código HTML. Retire!

[ArthurMVA 0]

Maujor, mestre, valeu! Muito obrigado, funcionou! Amo seu site e sigo todas novidades dele.