css样式添加遮罩
借鉴地址：“”
原理：利⽤css样式实现⿏标移⼊加⼀层遮罩的效果。将遮罩层absolute定位到要添加遮罩层的上⾯，⿏标移⼊让他显⽰。
代码⽚：
html:
CSS <div class="ai_demo" >
<div class="price">
<div class="content">
<p class="price">Huskie</p>
<p class="intro">  introduction introduction introduction</p>css鼠标点击样式
</div>
</div>
<div class="btn"><a href="#">like it?</a><a href="#">hate it?</a><a href="#">buy it!</a></div>
</div>
.ai_demo{width: 250px; height: 250px; background:url("www.magpet/images/upload/Image/87076179_snap(25).jpg")  no-repeat scroll 0 0 .ai_demo.btn{ padding: 225px 0 0 80px; text-align: right; position: relative;z-index: 999;}
.ai_demo.btn > a{ line-height: 22px; padding:3px 5px; margin-right: 1px; color:#fff; background:#84654e; font-size: 12px; text-decoration: none .ai_demo div.price{ display: none;}
.ai_demo:hover div.price > .content{  padding-top:70px; text-align: center;}
.ai_demo:hover div.price > .content p.price,.ai_demo:hover div.price > .content p.intro{ color:#fff; padding: 0 5%; font-size: 24px;}
.ai_demo:hover div.price > .content p.intro{ font-size: 14px;}
.
ai_demo:hover div.price{ width: 100%; height: 250px; display: block; background:#000; opacity: .5; -moz-opacity: .5; filter:alpha(opacity=50); position

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。