css+html鼠标划入hover效果(一)

最新推荐文章于 2024-01-29 11:12:36 发布

Ly_cat

最新推荐文章于 2024-01-29 11:12:36 发布

阅读量3.1k

点赞数 4

分类专栏：前端文章标签： css html

本文链接：https://blog.csdn.net/weixin_43853746/article/details/107131699

版权

前端专栏收录该内容

78 篇文章 35 订阅

订阅专栏

效果图：在这里插入图片描述

html部分:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>商品列表鼠标效果</title>
</head>
<body>
  <div class="grally">
      <div class="head">
         <span>热门新品</span>
         <a href="#">更多></a>
      </div>
  <ul>
    <li>
      <div class="deatil">
         <h2>华为手表</h2>
         <a href="#">马上购买</a>
      </div>
      <img src="img/img (2).jpg" width="210px" height="140px" alt=""/>
    </li>
    <li>
      <div class="deatil">
         <h2>华为手表</h2>
         <a href="#">马上购买</a>
      </div>
      <img src="img/img (1).jpg" width="210px"  height="140px" alt=""/>
    </li>
    <li>
      <div class="deatil">
         <h2>华为手机</h2>
         <a href="#">马上购买</a>
      </div>
      <img src="img/img (3).jpg" width="210px"  height="140px" alt=""/>
    </li>
    <li>
      <div class="deatil">
         <h2>华为荣耀</h2>
         <a href="#">马上购买</a>
      </div>
      <img src="img/img (5).jpg" width="210px"  height="140px" alt=""/>
    </li>
    <li>
      <div class="deatil">
         <h2>华为Pro30</h2>
         <a href="#">马上购买</a>
      </div>
      <img src="img/img (6).jpg" width="210px"  height="140px" alt=""/>
    </li>
    <li>
      <div class="deatil">
         <h2>华为mate</h2>
         <a href="#">马上购买</a>
      </div>
      <img src="img/img (8).jpg" width="210px"  height="140px" alt=""/>
    </li>
    <li>
      <div class="deatil">
         <h2>华为精品</h2>
          <a href="#">马上购买</a>
      </div>
      <img src="img/img (4).jpg" width="210px"   height="140px" alt=""/>
    </li>
    <li>
      <div class="deatil">
         <h2>华为nova3</h2>
         <a href="#">马上购买</a>
      </div>
      <img src="img/img (7).jpg" width="210px"  height="140px" alt=""/>
    </li>
  </ul>  
  </div>
</body>
</html>

css部分：

*{
    margin:0;
    padding:0;
}
body{
    font-family:"微软雅黑";
    background-color:#ddd;
} 
.grally{
    width:1024px;
    height:400px;
    background:#fff;
    margin:30px auto;
    padding:20px;
}
.grally .head span{
    font-size:18px;
    color:#333;
}
.grally .head{
    margin-bottom:20px;
}
.grally .head a{
    text-decoration:none;
    float:right;
    font-size:15px;
    color:#CD0707; 
}
.grally .head a:hover{
    color:#F00;
}
.grally ul li{
    width:210px;
    height:140px;
    list-style:none;
    position:relative;
    float:left;
    margin-left:30px;
    margin-bottom:30px;
    overflow:hidden;
}
.grally ul li .deatil{
    width:210px;
    height:140px;
    background:rgba(0,0,0,0.7);
    position:absolute;
    top:-240px;
    -webkit-transition:all 0.3s ease;  <!--适应ie，谷歌，苹果浏览器内核-->
    -o-transition:all 0.3s ease;      <!--适应Opera浏览器内核-->
    -moz-transition:all 0.3s ease;    <!--火狐浏览器-->
    -ms-transition:all 0.3s ease;     <!--微软-->
}

.grally ul li .deatil h2{
    font-size:18px;
    color:#fff;
	margin-bottom:20px;
    text-align:center;
    padding-top:30px;
    }

.grally ul li .deatil a{
    font-size:15px;
    display:block;
    color:#fff;
    background-color:#F00;
    text-decoration:none;
    width:100px;
    height:40px;
	
    text-align:center;
    line-height:40px;
    margin:0 auto;
}
.grally ul li:hover .deatil{
    top:0;
}

Ly_cat

关注

4
点赞
踩
26

收藏

觉得还不错? 一键收藏
0
评论
css+html鼠标划入hover效果(一)

效果图：html部分:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> &lt
复制链接

扫一扫