from the docs on mouseleave: "This event fires when the mouse leaves
the area of the DOM Element and will not be fired if the mouse crosses
over children of the Element (unlike mouseout)."
this is just the case with my example, except when i have a <select>
element with options as a child element. the mouseleave event on the
parent div is fired when i try to move my mouse over the options
dropdown.
code example:
<div id="product" style="width:200px; height:200px;">
<div class="details" style="display:none; height:200px;">
<h1>Example</h1>
<select>
<option>Color</option>
<option>Red</option>
<option>Blue</option>
<option>Green</option>
</select>
</div>
</div>
<? Utility::startString(); ?>
<script type="text/javascript">
window.addEvent('domready', function() {
$('product_' + <?=$i;?>).addEvents({
'mouseenter': function() {
$('image_' + <?=$i;?>).hide();
$('details_' + <?=$i;?>).show();
if (cart.contains(<?=$i;?>))
$('product_' + <?=$i;?>).removeClass('added');
},
'mouseleave': function() {
$('thumbnails_' + <?=$i;?>).hide();
$('details_' + <?=$i;?>).hide();
$('image_' + <?=$i;?>).show();
if (cart.contains(<?=$i;?>))
$('product_' + <?=$i;?>).addClass('added');
}
});
});
</script>
<?=$this->appendJS(Utility::endString());?>
