Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  
  
  
  
  <div id="mobileWrapper" class="ios">
    <div class="hoverWrapper">
        <div class="acvCouponPreviewWrap clearfix">
            <div class="previewLeft"> <span class="previewLeftInner"> 10% </span>
            </div>
            <div class="previewRight"> <span class="previewUser"> Some Text here </span>
            </div>
        </div>
        <!-- clone will placed here -->
    </div>
    <div class="hoverWrapper">
        <div class="acvCouponPreviewWrap clearfix">
            <div class="previewLeft"> <span class="previewLeftInner"> 20% </span>
            </div>
            <div class="previewRight"> <span class="previewUser"> Some Text here </span>
            </div>
        </div>
        <!-- clone will placed here -->
    </div>
    <div class="hoverWrapper">
        <div class="acvCouponPreviewWrap clearfix">
            <div class="previewLeft"> <span class="previewLeftInner"> 30% </span>
            </div>
            <div class="previewRight"> <span class="previewUser"> Some Text here </span>
            </div>
        </div>
        <!-- clone will placed here -->
    </div>
</div>
  
  
  
  
</body>
</html>
 
#mobileWrapper {
    border:1px solid red;
    width:200px;
    position:relative;
    margin: 0 auto;
    margin-top:50px;
    height:200px;
}
.hoverWrapper {
    background:yellow;
    border:1px solid orange;
    height:50px;
}
.hoverWrapper.previewActive {
    background:red;
    border:1px solid orange;
    position:absolute;
    width:250px;
    top:0;
    height:70px;
}
 
$(document).ready(function () {
    $("div.hoverWrapper").hover(function () {
        
      console.log('enter');
        
      var hoveredItem = $(this);
      var position = hoveredItem.offset().top - $('#mobileWrapper').offset().top - hoveredItem.height()/2;
      var cloneItem = $(this)
        .clone()
        .addClass('previewActive')
        .css('top', position)
        .css('left', '-34px');
      hoveredItem.append(cloneItem);
    }, function () {
      
      console.log('leave');
        
      $('.previewActive').fadeOut(300, function () { $(this).remove(); });
      $('.previewActive').remove();
    
    });
  
});
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers