制作下拉封面图片css

Question

由于我在这里无法解释，请查看fiddle

PS 由于某些原因，画布在jsfiddle中无效，但您仍然可以在计算机上查看它。

#pic-area{
    height:250px;
    width:300px;
    overflow:hidden;  
    display:none;
    position:absolute;
    z-index:2;
}
#pic-area-triangle{
    content: "\00a0";
    display: block;
    height: 18px;
    width:18px;
    position: absolute;
        //top: -6px;
        //left: 15px;
    -webkit-transform: rotate( 45deg );
    -moz-transform: rotate( 45deg );
    background:#fff;
    margin-left:26px;
    margin-top:-4px;
    z-index:100;
}

#link2{
    margin-left:200px;
    margin-top:100px;
    position:relative;

}

var timer;
$('.showpic').mouseenter(function(){
    var a = $(this);
    timer = setTimeout(function(){
     $('#pic-area').css({
        top :   a.position().top + a.height() + 20,
        left : a.position().left
    }).appendTo(a).show();   
    },500);

}).mouseleave(function(){
    clearTimeout(timer);
$('#pic-area').hide();
});




<div class="showpic"><a href="#" >Show pic</a></div>
<div id="pic-area">
    <div id="pic-area-triangle"></div>
    <img src="https://m.ak.fbcdn.net/sphotos-a.ak/hphotos-ak-frc3/t1.0-9/p160x160/10307434_288032004706665_9141538842265110103_n.jpg" />
</div>
<div  class="showpic" id="link2"><a href="#">Show pic</a></div>

我想要这样的东西

我有两个问题

1. 当我鼠标悬停然后移向pic-area它hide()
2. 我希望三角形类似于我展示的图像