Ignore mouse events for overlapping divs
A page has 4 divs:
- Item A
- Item B
- Item C
- Details (hidden)
The desired e开发者_如何学Cffect is that the Details box will be shown when hovering over the Item box, and be hidden once moused out. The Details box will overlap with about 20% of the right of the Item box when it is shown.
However, the current erroneous effect I'm getting is that when I hover just on the right edge of any of the Item boxes, it goes into a forever loop of showing and hiding the Details box. Presumably this is because it's triggering the mouseout event of the Item box (when Details gets displayed) but immediately triggering the mouseover event again when the Details box is hidden. I'd like to know how to get around this.
My current code is:
$('div.item').hover(
function() {
$(this).showDetails();
},
function() {
$(this).hideDetails();
}
);
Thanks in advance for any pointers! Here's the jsfiddle link for anyone that can't visualize it. Try hovering over the Item boxes on the right side, and move the mouse a little and you will see the flicker occuring.
http://jsfiddle.net/s6CjP/1
Xavier, I've already tried appendTo for the details box, but the effect I want is that I want to have the mouse events only targeted to the actionable div (namely, Item). After some research I'm even quite sure if this is possible since the Details box is covering the div (and thus not able to attach an event to something below it)
One workaround would be to have the details DIV be a child of the item you're hovering over. That way the pointer is still "in" the correct item when it's over the details DIV, and mouseout isn't sent until the mouse leaves both DIVs. You could do this at least two ways:
- Have a separate details DIV for each item DIV (they'll all have different details anyway, right?).
- Yank the details DIV out of the DOM and append it to the correct item DIV in your showDetails() function.
You'll have to do some CSS trickery to get it to display like you want, but as long as the parent-child relationship is there, you shouldn't have to worry about erroneous mouse events.
Hope this helps!
I am having trouble visualizing your problem. Its unclear if the details box looks the same in all cases and where are the item divs on the page, and in relation to each other.
Please can you create a JSFiddle for it and paste some CSS, HTML and JS in there. Then I can take a look.
Try this one:
I think is what yr looking for:
HTML:
<div class="divItem" style="width:50px;height:50px;background-color:#FFEFC6">Item A</div>
<br />
<div class="divItem" style="width:50px;height:50px;background-color:#FFEFC6">Item B</div>
<br />
<div class="divItem" style="width:50px;height:50px;background-color:#FFEFC6">Item C</div>
<div id="divMove" style="width:100px;height:100px;background-color:#D9E9D0;display:none">
</div>
JAVASCRIPT:
$(".divItem").mousemove(function(e){
var left = e.pageX + 10 + "px";
var top = e.pageY + 20 + "px";
$("#divMove").show().css("top",top).css("left",left).css("position","absolute");
}).mouseout(function(){
$("#divMove").hide();
}).mouseenter(function(){
$("#divMove").text($(this).text());
});
CLICK HERE TO SEE THE SAMPLE
Nando, there are some better answers up there but I just want to throw this up there, though I am sure that you tried it.
Specially since you are using hover(), it sounds a little like you are running into what could be a very simple problem.
I'm sure you tried stop(true, true) right?
//
$('div.item').hover(
function() {
$(this).stop(true, true).showDetails();
},
function() {
$(this).stop(true, true).hideDetails();
}
);
//
精彩评论