標籤：doc hid image play -o ima trap height 自己
一直使用jQuery的hover()函數來寫滑鼠經過事件，這幾天發現其他同行直接使用CSS就搞定了。自己線上下也試了試：
當然也並不是沒有前提條件，需要配合一些定位屬性來使用（position/top/left）。代碼如下：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="css/bootstrap.css" /> <style> .outer { position: relative; width: 150px; } .link { padding: 0 18px; height: 50px; display: block; z-index: 2; background: #373d41; border-right: 1px solid #2a2f32; color: #fff; font-size: 14px; line-height: 50px; text-decoration: none; } .link:hover { background: #373d41 } .appear-hide { position: absolute; top: 50px; left: 0; background: #ccc; color: #000; opacity: 0; visibility: hidden; } .outer:hover .appear-hide { opacity: 1; visibility: visible; } .test {margin-top: 20px} </style></head><body> <div class="outer"> <a class="link" href="javascript:;">點擊出現或隱藏</a> <div class="appear-hide"> <p>CSS、CSS3</p> <p>HTML、HTML5</p> <p>JavaScript、ES6</p> <p>HTTP協議</p> <p>效能最佳化</p> <p>一門後端語言</p> <p>更好的方式寫代碼</p> <p>線下開發和代碼發布</p> </div> </div> <div class="test"> <p>CSS、CSS3</p> <p>HTML、HTML5</p> <p>JavaScript、ES6</p> <p>HTTP協議</p> <p>效能最佳化</p> <p>一門後端語言</p> <p>更好的方式寫代碼</p> <p>線下開發和代碼發布</p> </div></body></html>View Code
沒看明白的地方：
添加的CSS代碼：
.test { margin-top: 20px; opacity: 0.5; }
子項目p並沒有繼續其opacity屬性值：
小結：當然這隻是簡單的滑鼠經過顯示事件，複雜一些的還是需要使用jQuery等來寫。
巧用CSS屬性visibility與opacity代替滑鼠經過的jQuery事件
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
