Grid实现鼠标悬浮显示另一个div内容

鼠标悬浮显示其他的div内容方法有很多，这里就不一一列举，这里我们介绍如何用Grid实现。

代码图片：

实现效果：

1. 鼠标未悬浮时表现情况

2. 鼠标悬停后表现情况

代码实现：

HTML部分

          <div class="container">
              <div class="wrap">
                  <div class="item1">
                      <img src="../img/head-icon.png" alt="">
                      <div>前端工程师</div>
                      <span>
                            Web前端开发工程师,主要职责是利用(x)HTML/CSS/JavaScript/
                            flash等各种Web技术进行产品的开
                            发。
                      </span>
                  </div>
                  <div class="item2">
                      <p>门槛&nbsp;&nbsp;<img src="../img/star.png" alt=""></p>
                  </div>
                  <div class="item3">
                      <p>难易程度&nbsp;&nbsp;
                        <img src="../img/star.png" alt="">&nbsp;&nbsp;
                        <img src="../img/star.png" alt="">
                      </p>
                  </div>
                  <div class="item4">
                      <p>成长周期&nbsp;&nbsp;<span class="red">1-3</span>年</p>
                  </div>
                  <div class="item5">
                      <p>稀缺程度&nbsp;&nbsp;&nbsp;
                      <span class="red">345</span>
                      </p>
                  </div>
                  <div class="item6">
                      <p>薪资待遇</p>
                  </div>
                  <div class="item7">
                      <p>
                          <span>0-1年</span>
                          <span class="float-r">5k-10k/月</span>
                      </p>
                  </div>
                  <div class="item8">
                      <p>
                          <span>1-3年</span>
                          <span class="float-r">10k-20k/月</span>
                      </p>
                  </div>
                  <div class="item9">
                      <p>
                          <span>5-10年</span>
                          <span class="float-r">20k-50k/月</span>
                      </p>
                  </div>
                  <div class="item10">
                      <p class="heavy">有<span class="red">286</span>个人正在学</p>
                  </div>
                  <div class="item11">
                      <p>提示:在你学习之前你应该已经掌握XXXXX、XXXXX、XX等语言基础</p>
                  </div>
                  </div>
                  <div class="wrap2">
                      <div class="item12">iOS工程师</div>
                      <div class="item13">
                        iOS是由苹果公司开发的移动操作统，
                        iOS与苹果的Mac OS X操作系统一样，
                        国内iOS开 发起步相对较晚，人才培养机制更是远 远跟不上市场发展速度。
                        人才培养机制 更是远远跟不上市场发展速度。有限的iOS开发人才成了国内企业必争的资源。
                  </div>
                  </div>
              </div>

CSS部分

.wrap {
    position: relative;
    display: grid;
    background-color: #fff;
    border: 1px solid #eeeded;
    grid-template-columns: repeat(10,1fr);
    grid-template-rows: 200px repeat(6,40px) auto;
    font-size: 12px;
    color: #333;
}

.item1 {
    grid-column: 1 / 11;
/*    border-bottom: 1px solid #eeeded;*/
}

.item1 img {
    margin-top: 20px;
    margin-left: 10px;
    float: left;
}
.item1 div {
    margin-top: 30px;
    margin-bottom: 10px;
    margin-left: 159px;
    font-size: 16px;
    font-weight: 600;
}

.item1 span {
    display: block;
    margin-left: 159px;
    margin-right: 10px;
    word-break: break-all;
    font-size: 14px;
}

.item2{
    grid-column: 1 / 6;
    grid-row: 2 / 3;
    border: 1px solid #eeeded;
}

.item3 {
    grid-column: 6 / 11;
    grid-row: 2 / 3;
    border: 1px solid #eeeded;
    border-left: none;
}

.item4 {
    grid-column: 1 / 6;
    grid-row: 3 / 4;
}

.item5 {
    grid-column: 6 / 11;
    grid-row: 3 / 4;
}

.item6 {
    grid-column: 1 / 5;
    grid-row:  4 / 7;
    -ms-flex-item-align: center;
    align-self: center;
    justify-self: center;
}

.item7 {
    grid-column: 5 / 11;
    grid-row: 4 / 5;
}

.item8 {
    grid-column: 5 / 11;
    grid-row: 5 / 6;
}

.item9 {
    grid-column: 5 / 11;
    grid-row:  6 / 7;
    border-bottom: none;
}

.item10 {
    grid-column: 1 / 11;
    grid-row: 7 / 8;
    border: 1px solid #eeeded;
}

.item11 {
    grid-column: 1 / 11;
    grid-row: 8 / 9;
    word-break: break-all;
    padding: 5px 10px;
}

.item4, .item11 {
    border: 1px solid #eeeded;
    border-top: none;
}

.item5, .item7, .item8, .item9 {
    border: 1px solid #eeeded;
    border-top: none;
}

.item2, .item3, .item4, .item5, .item7, .item8, .item9, .item10{
    line-height: 40px;
    padding-left: 10px;
}

.item2, .item3, .item4, .item5, .item6, .item11 {
    color: #999;
}

.red {
    color: #F01400;
}

.heavy {
    font-weight: 600;
}

.black {
    color: #333;
}

.float-r {
    float: right;
    padding-right: 10px;
}

.wrap2 {
    position: absolute;
    top: 0;
    opacity: 0;
    display: grid;
    margin-right: 15px;
    grid-template-columns: repeat(10, 1fr);
    grid-template-rows: repeat(5, 40px) ;
    color: #fff;
    background: rgba(3, 0, 0, .6);
}

.wrap2:hover {
    opacity: 1;
    -webkit-animation: swordsmanye 3s;
    animation: swordsmanye 3s;
}

.item12 {
    grid-column: 1 / 11;
    grid-row: 3 / 5;
    font-size: 1.5rem;
    text-align: center;
}

.item13 {
    grid-column: 2 / 10;
    grid-row: 5 / 11;
    padding-bottom: 3.2rem;
    text-indent: 2em;
    font-size: 16px;
}
/*动画实现*/
@keyframes swordsmanye {
  0% {
      background: #c00;
      opacity: .6;
    }
  50% {
      background: orange;
      opacity: .6;
    }
  100% {
      background: yellowgreen;
      opacity: .6;
    }
}