京东静态网页设计案例（2）

最新推荐文章于 2024-06-18 10:27:10 发布

yudbk

最新推荐文章于 2024-06-18 10:27:10 发布

阅读量2.5k

点赞数

文章标签： HTML 前端知识学习总结

本文链接：https://blog.csdn.net/weixin_43661559/article/details/84546919

版权

本文介绍了京东静态网页设计中图片悬停效果的实现方法，通过CSS设置透明div覆盖实现。此外，详细讲解了overflow：hidden属性的作用，以及margin和padding的用法，包括常见写法和单独控制各边距的方法。

摘要由CSDN通过智能技术生成

一、图片的悬停

在鼠标悬停到图片上时，图片像是被覆盖了一层白色的薄膜。如下面两幅图片。

在鼠标悬停之后显示如右图

下面说明实现该效果的步骤：

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><

关注