Npcink Blog
切换菜单

hover 浮出效果 - CSS 笔记

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

最后更新于
本页目录4 节

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

示例

<ul>
    <li>
      1
      <div class="ewm-content hide">
        111
      </div>
    </li>




    <li>2
      <div class="ewm-content hide">
        222
      </div>
    </li>




    <li>3
      <div class="ewm-content hide">
        333
      </div>
    </li>
  </ul>


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


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

核心 CSS

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


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

示例

如何使用