本文章實現是基於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>

此處表示程式碼結束。。。

效果是帶動畫的，這裡可能看不出，可以自己嘗試寫一下。個人感覺還是不錯滴....