hover浮出效果 - CSS筆記

當(dāng)鼠標(biāo)移動(dòng)到指定的位置，機(jī)會(huì)付出一個(gè)框來(lái)顯示豐富的內(nèi)容，這樣做，可以在有限的空間里展示更加豐富的內(nèi)容。

• 代碼來(lái)源：詳情

示例

• 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>

示例

如何使用

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

視頻教程

相關(guān)推薦

hover選擇器設(shè)置其它元素 - CSS筆記

Muze

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

CSS3實(shí)現(xiàn)偽類hover離開時(shí)平滑過(guò)渡效果

Muze

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