Fellow rollovers,
I'm trying to prevent a div from fading out and disappearing when it's not supposed to.
This div sits on top of an image. The image has a mouseover and mouseout function that makes the div appear and disappear as the user rolls over from one image to another.
I should point out that the div and all the html around it is created dynamically, so I have to use the .live event handler.
The problem comes when one rolls over the div itself. Because it's technically a mouseout event from the image's point of view, the div disappears, even though I want it to remain present as the user has not really rolled over a different image, just a different element that happens to be sitting on top of the image.
Here is a link pointing to what I have working so far: http://chereecheree.com/dagworthy/design.html
Note that when you roll over an image, an info box appears (the div) but rolling over this div makes it fade out, creating an unpleasant blinking effect.
Here is the code that deals with that behavior:
(I'm trying to test where the rollover happened last, but it's been tricky)
<head>
<script>
var curDockItem, lastDockItem, lastDockItemElement, curDockItemElement;
$("#design ").live("mouseover", function(e){
var parentNode = e.target.parentNode;
var infoBoxes = $(parentNode).find("div");
curDockItemElement = e.target.nodeName;
$(infoBoxes).each(function(){
$(this).fadeIn("slow");
lastDockItem = infoBoxes;
});
});
$("#design").live("mouseout", function(e){
var parentNode = e.target.parentNode;
var infoBoxes = $(parentNode).find("div");
$(infoBoxes).each(function(){
if (curDockItemElement == 'IMG') {
//alert (lastDockItem[0]);
$(lastDockItem).each(function(){
$(this).fadeOut("slow");
});
}
});
});
</script>
</head>
div id="design">
<span id="Romper">
<image />
<div class="boxItemInfo" style="margin-left:50px; margin-top:-180px;" >
<h1>Cable-Knit<br>Alpaca Romper</h1>
</div>
</span>
<span id="RedShorts">
<image />
<div class="boxItemInfo" style="margin-left:150px; margin-top:-220px;" >
<h1>Cashmere<br>Knit Shorts</h1>
</div>
</span>
<span id="StripeShorts">
<image />
<div class="boxItemInfo" style="margin-left:100px; margin-top:-220px;" >
<h1>Merino/Mohair/Silk<br>Knit Shorts</h1>
</div>
</span>
<span id="CheckerBow">
<image />
<div class="boxItemInfo" style="margin-left:75px; margin-top:-265px;" >
<h1>Cashmere/Silk<br>Checkered Sweater </h1>
</div>
</span>
</div>