Pase el cursor sobre varios elementos que afectan solo a 1 elemento

hi guys i was wondering if there is a way to hover a few elements with the same class name which is placed side by side and actions would be trigger upon leaving the area of the elements. For example :

<div class="hoverme"></div>
<div class="hoverme"></div>
<div class="hoverme"></div>
<div class="hoverme"></div>
<div class="hoverme"></div>

the javascript of "unhover" below should only be called when they leave the whole area of "hoverme" class.

$('.hoverme').live('mouseover mouseout', function(event) {
            if (event.type == 'mouseover') {

                if(!$("#stage1 td").hasClass("hover"))
                {
                    $("#stage1 td").addClass("hover",200)
                }   
            } 
            else {

                //$("#stage1 td").removeClass("hover",200)

            }
        });

Is there a way for this action??

EDIT: Forgot to mention that the shape of the div is not just purely square. It consist of a few squares but in the end the shape is rather odd. So i could not be wrapping my divs with another parent div.

i am using jquery ui therefore i am able to addclass and removeclass with the second parameter

preguntado el 04 de julio de 12 a las 04:07

could you show us where is #stage1 td? -

Why are you passing a second parameter to .addClass()? It only takes one parameter, either a string or a function. -

@JeffRobertDagala err i would say the #stage1 td would be the least matter im worried about. it is to make the td background coloured. ianpgall: i am using jqueryui therefore am able to use the second parameters. Edited the post mentioning that now -

someone voted down this post...wonder if you could let me know why? -

5 Respuestas

It appears to be a mix of the previous answers.

  • Use mouseenter and mouseleave instead of mouseover and mouseout.

  • En segundo lugar, tu puede use a wrapper div, and this is how I made it work. If you're hovering over a child div, you're hovering over its parent as well, regardless of where that parent is. A mouseleave event on the parent div won't trigger until you're no longer hovering over any of the children.

I tried creating a zero-sized wrapper div with five child divs absolutely positioned into the shape of a cross, and I believe it works the way you say you need it to. Tested in Firefox and Chrome.

$('.hoverme-wrapper').on('mouseenter mouseleave', function(e) {
  if (e.type === 'mouseenter') {
    if(!$("#stage1 td").hasClass("hover")) 
      $("#stage1 td").addClass("hover", 200)
  } else {
    $("#stage1 td").removeClass("hover", 200);
  }

[edited to confirm I've tested against jQuery UI addClass implementation]

Respondido 04 Jul 12, 11:07

it works because u are just doing addClass("hover") if you happen to read the post properly, i had another parameter addClass("hover",200). once the mouseleaves, it still can see the different state for the stage1 td - Lilsizzo

I incorporated jQuery UI into my test, and it still works fine. Can you supply clearer information on the error you're getting? Post some example css? It might be your method of positioning that's setting you awry. - brezo gaye

i got it working. perhaps i misunderstood or something earlier. Thank you!! - Lilsizzo

Great! I've edited my answer a bit - on re-reading I think the key point was a bit vague. - brezo gaye

Do you mean whenever they hover over any of the elements they all recieve the hover class? Try this:

var elements = $('.hoverme');
elements.on('hover', function(event) {
  event.type == 'mouseover' ? elements.addClass('hover') : elements.removeClass('hover');
});

Alternatively, you can restructure your HTML to wrap the hover-able elements, i.e.:

<div class="hoverWrap">
  <div class="hoverme"></div>
  <div class="hoverme"></div>
  <div class="hoverme"></div>
  <div class="hoverme"></div>
  <div class="hoverme"></div>
</div>

And then attach the hover event listener to hoverWrap. Semantically this makes more sense; just because the elements are close to each other in the markup doesn't mean they should be treated as one large element.

Respondido 04 Jul 12, 04:07

prueba esto: live() está en desuso, puedes usar on() método:

$('.hoverme').on('mouseover', function(event) {
   $("#stage1 td").addClass("hover")
}).on('mouseout', function() {
   $("#stage1 td").removeClass("hover")
})           

http://jsfiddle.net/jUmTt/

Respondido 04 Jul 12, 04:07

Ene sta forma, .on() no es un .live() replacement; however as long as this code is in the document ready function and the "hoverme"-classed elements are not destroyed and replaced, it will work! - Greg Petit

like i have edited the post...try adding another parameter to the addclass and removeclass - Lilsizzo

I have no idea, but I think you're trying to do this:

var timer;
$('.hoverme').on('mouseenter mouseleave', function(e) {
    if (e.type === 'mouseenter') {
        clearTimeout(timer);
        if(!$("#stage1 td").hasClass("hover")) {
            $("#stage1 td").addClass("hover")
        }   
    } else {
        timer = setTimeout(function() {
            $("#stage1 td").removeClass("hover");
        }, 300);
    }
});

Respondido 04 Jul 12, 04:07

it is not working well. adeneo add another paramter for the addclass and removeclass...im am using jqueryui...there is an option for it. thanks - Lilsizzo

utilizan el mouseleave en lugar de mouseout.

Respondido 07 Jul 12, 07:07

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