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 <option>'s 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 id="details" 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>
<script type="text/javascript">
window.addEvent('domready', function() {
$('product').addEvents({
'mouseenter': function() {
$('details').show();
},
'mouseleave': function() {
$('details').hide();
}
});
});
</script>
i have tried to capture the event and see if the target is the select,
but the results are quite inconsistent. ive also tried removing the
mouseleave event on select focus, and re-adding it on blur, but again
this only work if the user fully blur's from that element before
leaving the parent div.
any help would be greatly appreciated!
thanks,
kevin
