搜尋

熱門關鍵字:

最新文章

  1. 首頁
  2. »
  3. 網頁開發
  4. »
  5. CSS
  6. »
  7. [教學] CSS3新屬性「pointer-events」讓你可隔山打牛，不再被上層元件給遮住

[教學] 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」讓你可隔山打牛，不再被上層元件給遮住

#範例展示


css3教學, css3新層性, css教學, pointer-events教學,