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; }
}