实现一个特效，鼠标经过图片，图片就显示灰色遮罩层，这css代码是怎么实现的呢
我们要在img上面添加一个div 大小和图片一样大
.marquee li{position: relative;}
然后通过定位
.team_bm{border: 1px solid #000;
position: absolute;
top: 0;
left: 0;
width: 165px;
height: 138px;
background: rgba(0,0,0,0.4);
display: none;}
.marquee li:hover .team_bm{display: block;} 鼠标警告display进行切换
下面是html代码
.marquee li:hover .team_bm{display: block;} 鼠标警告display进行切换
下面是html代码
<div class="marquee">
<ul>
<li>
<div class="team_bm">
<span>Maecenas1 </span>
</div>
<img src="./img/c1.jpg" width="164px" height="146px"><p><a href=""> </a></P></li>
<li>
<div class="team_bm">
<span>Maecenas 2</span>
</div>
<img src="./img/c2.jpg" width="164px" height="146px"><p><a href=""> </a></P></li>
<li><img src="./img/c3.jpg" width="164px" height="146px"><p><a href=""> </a></P></li>
<li><img src="./img/c1.jpg" width="164px" height="146px"/><p><a href=""> </p></a></li>
<li><img src="./img/c2.jpg" width="164px" height="146px"/><p><a href=""> </p></a></li>
<li><img src="./img/c3.jpg" width="164px" height="146px"/><p><a href=""> </p></a></li>
<li><img src="./img/c1.jpg" width="164px" height="146px"/><p><a href=""> </p></a></li>
</ul>
</div>
下面是完整的css代码
下面是完整的css代码
.marquee li{position: relative;}
.marquee img{width: 165px;height: 138px;}
.team_bm{border: 1px solid #000;
position: absolute;
top: 0;
left: 0;
width: 165px;
height: 138px;
background: rgba(0,0,0,0.4);
display: none;}
.marquee li:hover .team_bm{display: block;}
是不是又学到啦
是不是又学到啦
辽公网安备:42900402000182号