鼠标移上图片遮罩层的显示隐藏

<li class="floatL proLink">
    <a href="">
        <img src="img/index-smallPic1.jpg" alt="" class="proLinkBg"/>
    </a>
    <a href="" style="display: none;" class="opacity">
        <div class="opacityTxt">
            <h2>Wallcovering</h2>
            <p>壁纸</p>
        </div>
    </a>
</li>

思路：

1. 遮罩层.opacity定位到li上，设置背景色，透明度。
2. 鼠标移上（mouseenter）父级.proLink，遮罩层显示。
3. 鼠标移出父级.proLink，遮罩层隐藏。

//透明
$(".proLink").mouseenter(function(event){          
    var event= event || window.event;
    $(this).find(".opacity").fadeIn();
    $(".proLink").mouseleave(function(event){
        $(".opacity").hide();
    })
})