El menú desplegable desaparece antes de llegar a los enlaces.

Echa un vistazo a la laguna link in the menu on consulta en esta página. When I hover over tour, it's supposed to show the menu and let me choose which of the sub menus I wish to click on but it's disappearing too fast.

Here's the code of the menu:

$('.menu > li > a').filter(function(){
    if( $(this).siblings('ul').length ){ return true; }
}).hover(function(){ 
    $(this).siblings('ul').fadeIn(150); },function(){ 
    $(this).siblings('ul').fadeOut(150); }
);



¿Alguien sabe por qué está pasando esto?

preguntado el 09 de marzo de 12 a las 15:03

Deberías agregar el hover controlador de eventos al li elemento, no al a. -

That would be the normal way to do it, yes. But I want to only make the submenu appear when you hover accross the text, not the entire block. :p -

5 Respuestas

It seems as easy as this:

$('.menu > li').hover(
    function(){ 
        $(this).find('ul').fadeIn(150);
    },
    function(){
        $(this).find('ul').fadeOut(150);
    }
);

Or, for the retarded boss:

$('.menu > li > a').mouseenter(function(){ $(this).siblings('ul').fadeIn(150); });
$('.menu > li').mouseleave(function(){ $(this).children('ul').fadeOut(150); });

respondido 09 mar '12, 17:03

it had to be siblings and children instead of find. Nice job though, it works like supposed to now :D - imjp

Trata

$('.menu > li > a').filter(function(){
    if( $(this).siblings('ul').length ){ return true; }
}).mouseenter(function(){ 
    $(this).siblings('ul').fadeIn(150); }
).mouseleave(function(){ 
    $(this).siblings('ul').fadeOut(150); })

respondido 09 mar '12, 16:03

This doesn't work, because the mouseenter/leave is still based on the anchor tag. - imjp

150 milliseconds is a quite short timeframe. Use a longer timeframe instead.

.hover(function(){ 
    $(this).siblings('ul').fadeIn(1500); },function(){ 
    $(this).siblings('ul').fadeOut(1500); }
);

You may also want to keep it faded in while hovering on the sub menu... You need to change you selectors (reference the whole listitems instead of the link only).

Muestra
http://jsfiddle.net/E4EjZ/

// INIT
$('.menu > li > ul').hide();

$('.menu > li').hover(function(){
    $(this).find('ul').fadeIn(1500); },function(){
    $(this).find('ul').fadeOut(1500); }
);

respondido 09 mar '12, 16:03

The links still disappear if I hover away from the <a> tag. I need it to stay if I'm hovering the <ul> of the sub menu - imjp

@imjp I added a sample for this. - Smamatti

Instead of using onhover, you could try fading in on mouse over and fading out on mouse out. That might work better for your situation and give you more control over each separate event. Check out the example posted aquí.

contestado el 23 de mayo de 17 a las 13:05

That's wrong. He defines two handlers for hover (over, out). Check the jQuery API. -- api.jquery.com/hover - Smamatti

Podría dar un ejemplo? - imjp

@Smamatti You're right, I changed my answer to remove the false statement but still get my point across. Thanks! - CFL_Jeff

If you keep your mouse pointer over the 'tour' link you'll see that it doesn't fade away. But when you move your mouse away from the a element it fades away, like it's supposed to.

If you use hover with the parent li element instead, it'll work for the whole container which includes both the 'tour' link and the sub menu you're fading in.

respondido 09 mar '12, 16:03

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.