css如何实现鼠标移至图片上显示遮罩层及文字
问题：一张图片当鼠标移动到上方时，会显示一个遮罩层，并且显示一些提示文字html:<div class="contentimg"><span class="img_content"><a href="/" target="view_frame"><img src="./assets/img/图片路径.jpg" alt=""><span class="mask">河北亚创天然气股份有限公司 </span></a></span></div>
css: 其中要注意的是img_content样式里定义了position: relative;这个主要是为了让我们的遮罩层做绝对定位做准备的。
.contentimg img{width: 235px;height: 100px;}.contentimg .img_content{position: relative;padding: 0;width: 235px;height: 100px;}.contentimg .img_content .mask{position: absolute;top:-36px;left: 0;width: 235px;height: 100px;background: rgba(113, 198, 32, 0.9);color:#fff;line-height: 100px;text-align: center;display: none;}
js：这里使用jQuery。首先一定要引入jQuery.js
$(function(){$(".contentimg .img_content").mouseover(function(){$(".img_content .mask").show();});$(".contentimg .img_content").mouseout(function(){$(".img_content .mask").hide();});});
效果：鼠标hover至图片上面显示遮罩层及文字。
鼠标hover前：
鼠标hover后：
