[分享]css中如何实现悬停小窗口

在网页设计中，我们常常需要用到悬停小窗口来达到一些特殊的效果。在CSS中，我们可以借助伪类和属性选择器来实现这样的效果。首先，我们先来看一下HTML的基本结构： 用户名：Jack 邮箱：12345...

在网页设计中，我们常常需要用到悬停小窗口来达到一些特殊的效果。在CSS中，我们可以借助伪类和属性选择器来实现这样的效果。

首先，我们先来看一下HTML的基本结构：

<div class="container">
  <img class="avatar" src="avatar.jpg" alt="头像">
  <div class="info">
    <p>用户名：Jack</p>
    <p>邮箱：123456789@qq.com</p>
    <p>电话：123456789</p>
  </div>
</div> 

接下来，我们需要定义一些CSS样式来实现悬停小窗口。首先，我们需要为info元素设置一些基本属性：

.info {
  position: absolute;
  left: 100%;
  top: 0;
  width: 200px;
  height: 100%;
  background-color: #EEE;
  display: none;
} 

上面的代码中，我们使用了position属性将info元素定位为绝对定位，并使用left属性将其向右移动一个元素的宽度，使其悬停在avatar元素的右侧。然后，我们设置其宽度为200px，高度为100%，并设置背景色为灰色。最后，我们使用display属性将info元素设为不可见。

接下来，我们要为avatar元素设置一个:hover伪类，当鼠标悬停在其上时，将info元素设为可见：

.avatar:hover + .info {
  display: block;
} 

上面的代码中，我们使用+选择器选取紧接在.avatar元素后面的.info元素，并在其后面添加:hover伪类。当鼠标悬停在.avatar元素上时，我们使用display属性将.info元素设为可见。

最后，我们将.container元素的position属性设为relative，以便让.avatar和.info元素在.container元素内进行定位。

.container {
  position: relative;
} 

综上所述，我们就可以通过CSS来实现悬停小窗口的效果了。在实际开发中，我们可以根据需求对样式进行微调。