用hover配合(纯css)position实现网页动态展示效果

使用hover配合纯CSS的position属性，可以实现许多网页动态展示效果，如悬停弹出层、下拉菜单等。下面是一份关于如何用hover配合CSS动画实现此类效果的攻略。

准备环境

首先，我们需要准备一个HTML文件。我们可以在文件中定义一个div元素，后面的动态效果将会在其中实现。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Hover+CSS Position动态效果</title>
  <style>
    /* 初始化样式 */
    * {
      margin: 0;
      padding: 0;
    }

    /* 悬停块样式 */
    .hover-box {
      position: relative; /* 定位父元素 */
      display: inline-block;
    }

    /* 弹出块样式 */
    .pop-box {
      position: absolute; /* 定位子元素 */
      top: 100%;
      left: 0;
      margin-top: 10px;
      padding: 10px;
      background-color: #FFF;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
      opacity: 0; /* 初始化不可见 */
      visibility: hidden;
      transition: all 0.4s; /* 动画过渡效果 */
    }

    /* hover效果 */
    .hover-box:hover .pop-box {
      opacity: 1; /* 渐变显示 */
      visibility: visible;
      transform: translateY(0); /* 下移弹出 */
    }

  </style>
</head>

<body>
  <div class="hover-box">
    <a href="#">悬停弹出层</a>
    <div class="pop-box">
      <p>这是弹出层的内容</p>
    </div>
  </div>
</body>

</html>

实现过程

在上面的HTML文件中，我们定义了一个包含一个标题和一个下拉菜单的容器div。设置悬停弹出层的CSS样式：

/* 悬停块样式 */
.hover-box {
  position: relative; /* 定位父元素 */
  display: inline-block;
}

/* 弹出块样式 */
.pop-box {
  position: absolute; /* 定位子元素 */
  top: 100%;
  left: 0;
  margin-top: 10px;
  padding: 10px;
  background-color: #FFF;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  opacity: 0; /* 初始化不可见 */
  visibility: hidden;
  transition: all 0.4s; /* 动画过渡效果 */
}

悬停块hover-box使用position: relative来定位。弹出块pop-box使用position: absolute属性配合top: 100%和left: 0来使它相对于悬停块hover-box定位。设置opacity: 0和visibility:hidden来初始化隐藏弹出块。此时，弹出块的top属性指向悬停块的底部，margin-top表示弹出块和悬停块之间的间距。

最后，我们加上.hover-box:hover效果，使弹出块在鼠标悬停时下移、渐变显示。

/* hover效果 */
.hover-box:hover .pop-box {
  opacity: 1; /* 渐变显示 */
  visibility: visible;
  transform: translateY(0); /* 下移弹出 */
}

:hover伪类指定了当鼠标悬停在悬停块hover-box上时，其内部的弹出块会显示。

示例说明

下面我们通过两个示例来进一步演示使用hover配合CSS定位属性实现的动态展示效果。

悬停弹出块

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>悬停弹出块</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .hover-box{
            position: relative;
            display: inline-block;
        }
        .pop-box{
            position: absolute;
            top: 100%;
            left: 0;
            margin-top: 5px;
            padding: 10px;
            min-width: 80px;
            background-color: #fff;
            box-shadow: 0 2px 4px rgba(0,0,0,0.2);
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease-out;     
        }
        .hover-box:hover .pop-box{
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }
    </style>
</head>
<body>
    <div class="hover-box">
        <a href="#">11悬停弹出层</a>
        <div class="pop-box">
            <p>11这是弹出层的内容</p>
        </div>
    </div> 
    <div class="hover-box">
        <a href="#">22悬停弹出层</a>
        <div class="pop-box">
            <p>22这是弹出层的内容</p>
        </div>
    </div> 
</body>
</html>

以上代码演示了如何在鼠标悬停时使弹出层渐现，并实现微小缓冲效果。

下拉菜单

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>下拉菜单</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .menu {
      display: inline-block;
      position: relative;
    }

    .menu > a {
      display: block;
      padding: 10px 20px;
      background-color: #f5f5f5;
      border: 1px solid #DDD;
      color: #333;
      text-decoration: none;
    }

    .submenu {
      position: absolute;
      top: 100%;
      left: 0;
      background-color: #FFF;
      border: 1px solid #DDD;
      opacity: 0;
      visibility: hidden;
      transition: all 0.3s;
    }

    .menu:hover .submenu {
      visibility: visible;
      opacity: 1;
    }

    .submenu > li > a {
      display: block;
      padding: 10px 20px;
      color: #333;
      text-decoration: none;
    }

    .submenu li:hover a {
      background-color: #efefef;
    }
  </style>
</head>
<body>
  <div class="menu">
    <a href="#">一级菜单</a>
    <ul class="submenu">
      <li><a href="#">二级菜单1</a></li>
      <li><a href="#">二级菜单2</a></li>
      <li><a href="#">二级菜单3</a></li>
    </ul>
  </div>
</body>
</html>

上面的代码演示了一个简单的下拉菜单，其中一级菜单是通过a元素实现的。在:hover伪类中，我们添加了样式，当鼠标悬停在“一级菜单”上时，显示下拉列表。

总结

通过CSS的hover和position属性，我们可以方便地实现很多动态展示效果，例如悬停显示、下拉菜单等。想要获得更加复杂的效果，可以使用JavaScript等前端技术进行实现。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：用hover配合(纯css)position实现网页动态展示效果 - Python技术站