I have a list with different products plus the details of them. The details are hidden by default. I'd like to know how i can show the details calling the childrens of the list elements on hover. Here's a link to test it: http://jsfiddle.net/CXrb2/1/
HTML:
<div id="cart-sidebar">
<li>Product 1 <div class="product-details">Productinfo 1</div></li>
<li>Product 2 <div class="product-details">Productinfo 2</div></li>
<li>Product 3 <div class="product-details">Productinfo 3</div></li>
</div>
Prototype:
$$('.product-details').each(
function (e) {
e.hide();
}
);
$$('#cart-sidebar li').invoke('observe', 'mouseover', function(e) {
// any help would be great :)
});
One of many ways would be something like this:
$('cart-sidebar').select('li').each(function(el){
$(el).observe('mouseover', function(){
$(el).down('div').show();
});
});