Menu simples do hover jQuery
Pergunta
Isso parece realmente inchado, pode ser reescrito de qualquer maneira melhor/mais compacta:
$("#cart-summary").hover(
function () {
$('.flycart').slideDown('fast');
}
);
$(".flycart").hover(
function () {}, // mousein function not required
function () { // hide menu on mouseout
$('.flycart').slideUp('fast');
}
);
$('.flycart a.close').click(function(){
$(this).parents('.flycart').hide();
});
Obrigado!
Solução
$("#cart-summary").mouseenter(function () {
$('.flycart').slideDown('fast');
});
$(".flycart")
.mouseleave(function () {
$(this).slideUp('fast');
})
.find('a.close')
.click(function(){
$(this).parents('.flycart').hide();
});
É uma pequena melhoria, no entanto. Eu não conseguia adivinhar a relação entre o #cart-summary
e a .flycart
s.
Outras dicas
Em suma, não. No entanto, você pode fazer sem a função vazia do pau: basta usarmouseenter()
e mouseleave()
. mouseover
e mouseout
ter diferenças sutis para mouseenter
e mouseleave
. Veja a API do jQuery para obter mais informações.
$("#cart-summary").mouseenter(function()
{
$('.flycart').slideDown('fast');
});
$(".flycart").mouseleave(function()
{
$(this).slideUp('fast');
});
$('.flycart a.close').click(function()
{
$(this).parents('.flycart').hide();
});
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow