JSFiddle - React, Tailwind, and code Playground

by GaryC123

HTML

<div class="miniCart" id="miniCart" style="background-color: rgb(0, 0, 0);">

<div class="miniCartContentDiv">
	

	 	<a href="https://development.web.newbalance.demandware.net/on/demandware.store/Sites-warrior_uk-Site/en_GB/Cart-Show" class="miniCartQty">
	 		<span class="totalItems">
	 			2
				</span>
			</a>
	
			
	
	
		<div style="display: none;" class="miniCartContent">
<div class="dw-object dw-object-rinclude" style="display:none;" id="ext-gen100"><textarea wrap="off" rows="10" cols="100" id="ext-gen101">({"PipelineURL":"http://localhost:60606/target=/c/core/p/__SYSTEM__Slot-Render","TemplateURL":"http://localhost:60606/target=/c/app_warrior_ui/t/default/slots/html/htmlslotcontainer.isml","PageCacheExpires":"11/03/2014 15:58","PipelineTitle":"__SYSTEM__Slot-Render (core)","TemplateTitle":"/default/slots/html/htmlslotcontainer.isml (app_warrior_ui)","PageProcessingTime":8})</textarea></div><div class="slotContainer">
	
		
			<a href="http://development.web.newbalance.demandware.net/on/demandware.store/Sites-warrior_uk-Site/en_GB/Page-Show?cid=shipping"><!-- dwMarker="link" dwPipelineTitle="Page-Show (app_base)" dwPipelineURL="http://localhost:60606/target=/c/app_base/p/Page-Show" --><img style="margin:5px 0 0 0;" src="http://demandware.edgesuite.net/aagi_dev/on/demandware.static/Sites-warrior_uk-Site/Sites/en_GB/v1394465265555/Warrior_UK/images/free_ship_mini_cart.gif"></a>	
		
	
</div> 
	
			<div class="checkoutMiniCart" style="height: 195px; overflow: auto;">
			<h4>Your Cart</h4>

		
			<div class="summaryproduct">
				<div class="leftContent">
					<div class="image">
						
						
								<a href="/on/demandware.store/Sites-warrior_uk-Site/en_GB/Product-Show?pid=886863408524"><img title="Liverpool Home Goal Keeper Jersey 2013/14, White with Anthracite" alt="Liverpool Home Goal Keeper Jersey 2013/14, White with Anthracite" src="http://s7d5.scene7.com/is/image/WAR/wstm302wt_war_03_i?$war_2013_minicart$"></a>
						
					</div><!-- END: image...

CSS

#miniCart .miniCartContent {
    background-color: #FFFFFF;
    box-shadow: 1px 1px 4px 0 #666666;
    padding: 1.25em;
    position: absolute;
    right: 0;
    width: 21.25em;
    z-index: 200;
}

JavaScript

$("#miniCart").mouseenter(function(){
	if(!$(".miniCartContent").hasClass("shown")) {
	$(".miniCartContent").addClass("shown").stop().slideDown()
    }
})
$("#miniCart").mouseleave(function(event){
	if(!$(event.toElement).hasClass("miniCartContent")){
		$(".miniCartContent").removeClass("shown").stop().slideUp()
	}
})
$(".miniCartContent").mouseleave(function(event){
	if(!$(event.toElement).hasClass("miniCart")){
		$(".miniCartContent").removeClass("shown").stop().slideUp()
	}
})