鼠標經過的時候，顯示出里面的隱藏內容。
我這里的設置是，鼠標只有移到第一個 li 的時候才會觸發那個事件，因為 css 有控制。css里面的控制是，鼠標移到li之后，如果里面有 none 這個類才會觸發這個樣式；如代碼所示，第二個li里面並沒有 none 這個類，所以並不會有干擾。下面寫代碼的時候，li 里面的類名不要設置一樣，就不會有沖突了。除非你想要一樣的內容，那就當我沒說。
**注意事項，li 要設置相對定位 position: relative，none 設置絕對定位的時候，left 的值要和 li 的寬一樣，不然鼠標移到內容的時候，內容會消失。
代碼：
<!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>Document</title> <script src="./vue2.6.10.js"></script> <style lang="scss"> li { position: relative; width: 100px; height: 30px; background-color: rgba(100, 163, 200, 0.3); margin-bottom: 30px; } /* 給a設置寬高百分百，就會撐滿 li，這樣鼠標經過 li 的時候，就會變為小手 */ li > a { display: inline-block; width: 100%; height: 100%; } .none { width: 300px; height: 200px; padding: 19px 24px 11px 16px; box-sizing: border-box; background: rgba(255, 100, 0, 0.1); border: 1px solid #999; position: absolute; left: 100px; top: -1px; z-index: 3; display: none;/*這里把 none 里面的內容隱藏起來*/ } /* 這里設置li鼠標移過的時候，如果里面有none這個類，才會觸發里面的樣式 */ li:hover .none{ display: block;/*這里把 none 里面的內容顯示出來*/ } </style> </head> <body> <div id="app"> <ul> <li> <a href="#">鼠標經過顯示</a> <div class="none">這里是隱藏的內容</div> </li> <!-- 鼠標移到第二個li的時候並不會顯示第一個li的隱藏內容，因為css里面有控制 --> <li> 商品列表 </li> </ul> </div> <script> var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' }, methods: {} }) </script> </body> </html>
鼠標沒經過的時候效果圖
鼠標經過的時候效果圖
結束