本文章实现是基于jQuery展示商品描述的一个功能
（1）鼠标移入显示描述内容，鼠标移开内容隐藏.先来看看一个先后效果。
（2）jQuery所以的文件可以自行下载，也可以在我主页找到文件，右键文件名复制链接，又或者联系我。
（3）效果是带动画的，animate() 是jQuery里封装好的动画函数。
1、鼠标未移入时，也就是默认打开状态
2、鼠标移入效果
那接下来直接上代码
html代码：
注：每个li表示一个商品，ul是商品列表
1 <div class="wrapper"> 2 <div class="container"> 3 <ul class="list"> 4 <li> 5 <div class="img-box"> 6 <!-- 商品图片 --> 7 <img src="" alt=""> 8 <span>商品1</span> 9 </div> 10 <div class="des-box"> 11 <p>商品描述1</p> 12 </div> 13 </li> 14 15 <li> 16 <div class="img-box"> 17 <!-- 商品图片 --> 18 <img src="" alt=""> 19 <span>商品2</span> 20 </div> 21 <div class="des-box"> 22 <p>商品描述2</p> 23 </div> 24 </li> 25 26 <li> 27 <div class="img-box"> 28 <!-- 商品图片 --> 29 <img src="" alt=""> 30 <span>商品3</span> 31 </div> 32 <div class="des-box"> 33 <p>商品描述3</p> 34 </div> 35 </li> 36 37 <li> 38 <div class="img-box"> 39 <!-- 商品图片 --> 40 <img src="" alt=""> 41 <span>商品4</span> 42 </div> 43 <div class="des-box"> 44 <p>商品描述4</p> 45 </div> 46 </li> 47 </ul> 48 </div> 49 </div>
css代码：
1 <style> 2 body{ 3 margin: 0; 4 } 5 ul{ 6 margin: 0; 7 padding: 0; 8 list-style: none; 9 } 10 .container{ 11 width: 1200px; 12 margin: 0 auto; 13 } 14 .container ul li{ 15 width: 276px; 16 height: 300px; 17 margin: 0 10px; 18 float: left; 19 border: 2px solid #000; 20 position: relative; 21 /* 溢出隐藏 */ 22 overflow: hidden; 23 } 24 .container ul li .img-box{ 25 padding: 20px; 26 } 27 .container ul li .img-box img{ 28 width: 100%; 29 } 30 .container ul li .des-box{ 31 width: 280px; 32 height: 40px; 33 background-color: orange; 34 line-height: 40px; 35 36 position: absolute; 37 left: -2px; 38 bottom: -40px; 39 z-index: 1000; 40 } 41 .container ul li .des-box p{ 42 padding: 0; 43 margin: 0; 44 margin-left: 10px; 45 } 46 </style>
jQuery代码：
// 一定要先引入jq文件才书写自己的jq代码，引入文件中含有min的是压缩版，用于线上版的较多。不含min的是未压缩版，我们能看得懂的，用于开发环境比较多。
<script src="../../jquery/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(function(){ // 获取每个li 并且绑定事件 // 鼠标移入 $(".list li").mouseenter(function(){ // 找出对应的商品描述 // .stop() 类似定时器的防抖思想 不加就会时，一直移入移出鼠标动画会停不下来，加了才没有Bug $(this).find(".des-box").stop().animate({bottom: 0},100) }) // 鼠标离开 $(".list li").mouseleave(function(){ // 隐藏对应的商品描述 $(this).find(".des-box").stop().animate({bottom: -40},100) }) }) </script>
此处表示代码结束。。。
效果是带动画的，这里可能看不出，可以自己尝试写一下。个人感觉还是不错滴....