<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>
思路:
- 遮罩层.opacity定位到li上,设置背景色,透明度。
- 鼠标移上(mouseenter)父级.proLink,遮罩层显示。
- 鼠标移出父级.proLink,遮罩层隐藏。
//透明
$(".proLink").mouseenter(function(event){
var event= event || window.event;
$(this).find(".opacity").fadeIn();
$(".proLink").mouseleave(function(event){
$(".opacity").hide();
})
})