JSFiddle - React, Tailwind, and code Playground

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>

CSS

#cart-sidebar{ width: 100px; }
li{ 
    width: 100px; 
    height: 100px; 
    border: 1px solid #ccc;
    display: block;
    float: left;
}
.product-details{
    width: 100px;
    height: 100px; 
    border: 1px solid orange;
    float: left;
}

JavaScript

$$('.product-details').each(
    function (e) {
        e.hide(); 
    } 
);
$$('#cart-sidebar li').invoke('observe', 'mouseover', function(e) {        
        
});