當鼠標移動到指定的位置，機會付出一個框來顯示豐富的內容，這樣做，可以在有限的空間里展示更加豐富的內容。

• 代碼來源：詳情

示例

• 1 111
• 2 222
• 3 333

核心CSS

<style type="text/css">
    .hide {
      visibility: hidden;
      opacity: 0;
    }

    li:hover .ewm-content {
      visibility: visible;
      bottom: 100%;
      opacity: 1;
    }
</style>

示例

如何使用

點擊下方的Demo按鈕，右擊鼠標查看源代碼，根據代碼注釋復制代碼到自己需要的地方，例如古登堡的HTML區塊或是小工具里面的“自定義HTML”，另外，記得看代碼注釋哦(。???)ノ

視頻教程

相關推薦

hover選擇器設置其它元素 - CSS筆記

Muze

• 20年9月3日
• 喜歡：0
• 瀏覽：510

CSS3實現偽類hover離開時平滑過渡效果

Muze

• 18年11月3日
• 喜歡：0
• 瀏覽：1k