<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();
    })
})