一、效果

不太明显 ，看代码比较直接，鼠标经过就会显示图片

【前端学习笔记 CSS系列八】显示与隐藏_css3

二、代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
      div {
        width: 100px;
        height: 100px;
        background-color: pink;
      }
      div:first-child {
        display: none; 隐藏元素,但不是删除，元素还是存在的，但是元素的位置不保留
        /* visibility: hidden;/* 隐藏元素,和display区别在于本方法保留元素的位置(停薪留职) */ */
      }
      div:nth-child(2) {
        display: none;
        background-color: purple;
      }
      div:nth-child(3) {
        line-height: 100px;
        text-align: center;
        margin: 10px auto;
        position: relative;
      }
      div img {
        position: absolute;
        width: 100px;
        right: -110px;
        top: 0;
        display: none;
      }
      div:nth-child(3):hover img {
        display: block;
      }
    </style>
  </head>
  <body>
    <div></div>
    <div></div>
    <div>
      显示隐藏测试
      <img src="img/1.jpg" />
    </div>
  </body>
</html>