CSS, CSS3, 網頁設計

[教學] CSS3新屬性「pointer-events」讓你可隔山打牛,不再被上層元件給遮住

梅干2018/06/19
梅問題-[教學]CSS3新屬性「pointer-events」讓你可隔山打牛,不再被上層元件給遮住
  很早之前梅干曾利用PNG製作一個圖框,讓圖片不再只限於矩形,同時還可在圖片的四周製作一些圖騰,讓整體看起來更加的有設計感,當把這一個圖框,蓋到圖片上方時,雖然中間是透明的,但滑鼠滑入時,並不會知道它是透明的,而是將它遮蓋住,因此完全無法點到下層,所以當時為了解決這問題只好透過javascript,才能順利的點到下層的連結。
  但現在不用這麼麻煩啦!直接透過CSS3的新層性pointer-events,就可讓滑鼠穿牆,直接點選到下層的區塊,如此一來就可點到下層的區塊,無論是換色或加特效,還是加入連結都沒問題,且設定超簡單,只要將這語法加入,立即就可讓滑鼠穿牆啦!且該語法目前也支援所有的瀏覽器,因此實用性相當的高喔!
Step1
首先,梅干先簡單的建立一個div,裡面再包一個div與a標籤。
<div class="outBox">
  <div class="topDiv"></div>
  <a href="https://www.minwt.com" class="minwtLink"></a>
</div>

Step2
接著再透過CSS的樣式設定,將topDiv蓋在a連結標籤上方。
.outBox{
  position: relative;
  width:500px;
  height:500px;
  border:solid 1px #222;
}
.topDiv,.minwtLink{
  display:block;
  width:300px;
  height:300px;
  border:solid 1px blue;
  position: absolute;
}
.topDiv{
  background:rgba(255, 200, 0, .8);
  z-index:2;
}
.topDiv:hover{
  background: rgba(230, 60, 45, .8);
}
.minwtLink:hover{
  background: rgba(230, 60, 45, .8);
  border:dashed 10px #ccc;
}

.minwtLink{
  background:rgba(18, 80, 235, .8);
  top:10px;
  left:10px;
  z-index:1;
}

Step3
由於梅干故意讓它有點錯位,這樣比較方便瀏覽,這時當滑鼠滑到上方的區塊時,則完全的將底層的區塊給遮蓋住,點選不到底層的連結。
梅問題-[教學]CSS3新屬性「pointer-events」讓你可隔山打牛,不再被上層元件給遮住
Step
而解決方法很簡單,只需在.topDiv中加入「pointer-events: none;」,再將滑鼠滑入時,就可成功的穿透上層的div,而點選到下層連結啦!是不是超神奇的呀!
梅問題-[教學]CSS3新屬性「pointer-events」讓你可隔山打牛,不再被上層元件給遮住
#範例展示