一、图片的悬停
在鼠标悬停到图片上时,图片像是被覆盖了一层白色的薄膜。如下面两幅图片。
在鼠标悬停之后显示如右图
下面说明实现该效果的步骤:
1.在该图片<img>标签的上方加入一个空的<div>标签并设置该div标签的类名。
2.给该div块设置绝对定位(该块的父元素应当设置相对定位)。
3.给该div块设置宽高,由于该div块是在img图片的上方使用,所以我设置的宽高与图片宽高一致,并将div的z-index属性设置在图片之上。
4.设置该div块的不透明度并将display属性定义为none值。
5.设置某一元素悬停时,让该div块显示。
示例代码如下:
HTML代码
<div>
<ul class="box_ul">
<li><div class="mo"></div><img src="./img/5baef1a8N9b2187e5.jpg" alt=""/></li>
<li><