On Hover 显示另一个 div CSS

在Web开发中，有时我们需要在鼠标悬浮在某个元素上时显示另一个元素，比如一个图片上放置一个标题。这种交互行为可以通过CSS中的:hover伪类来实现。

实现方法

首先，我们需要用HTML创建两个元素，一个用来显示，在:on hover时会显示出来。

<div class="box">Hover over me
  <div class="text">Hello World!</div>
</div>

然后，我们需要通过CSS来设置这两个元素的样式以及:hover伪类的样式。

.box {
  position: relative;
  display: inline-block;
  padding: 10px;
}

.box:hover .text {
  display: block;
  opacity: 1;
}

.text {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #fff;
  padding: 10px;
  box-shadow: 0 0 5px rgba(0, 0, 0, .3);
  opacity: 0;
  transition: opacity .5s;
}

上面的CSS代码中，我们通过设置position属性为relative来让父级元素.box变成相对定位元素，而.text元素则通过position:absolute来让它绝对定位在.box元素的下方。并且我们利用了: hover伪类来控制.text元素在:hover时的样式，当鼠标悬浮在.box元素上时，.text元素就会变成可见（display:block）且透明度为1（opacity:1）。

同时，我们可以利用CSS中的transition属性来为.text元素添加渐变效果，这样在鼠标悬浮的同时，.text元素就会平滑地过渡出来。

总结

使用:hover伪类来在鼠标悬浮时显示另一个元素，是Web开发中非常常见的一种交互方式。通过设置父元素和子元素的样式，我们可以轻松实现这个效果。