hover浮出效果 - CSS笔记

当鼠标移动到指定的位置，机会付出一个框来显示丰富的内容，这样做，可以在有限的空间里展示更加丰富的内容。

• 代码来源：详情

示例

• 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
• 浏览：438

CSS3实现伪类hover离开时平滑过渡效果

Muze

• 18年11月3日
• 喜欢：0
• 浏览：1k