文章彙整

CSS3屬性 pointer-events應用

Astral WebBy Astral Web 2 years agoNo Comments
首頁  /  網站設計與開發  /  CSS3屬性 pointer-events應用

用CSS3新屬性pointer-events

這個CSS3的新屬性,他最簡單的用法就是讓滑鼠滑過後沒有作用。

請看以下範例:

HTML:

<input type="checkbox" >按按看可以作用嗎

CSS:

input{

   pointer-events:none;

 }

 

顯示如下圖 checkbox 無法作用

CSS3屬性 pointer-events 應用

 

我們今天要做的以下的應用還滿有趣的:

HTML:

<div class="boxWrapper">

 <div class="top"></div>

 <a href="https://www.astralweb.com.tw" class="astralwebLink"></a>

</div>

SCSS:

.boxWrapper{

 position:relative;

 width:800px;

 height:800px;

 border:2px solid pink;

 .top,

 .astralwebLink{

   width:500px;

   height:500px;

   border:2px solid green;

   display:block;

   position:absolute;

 }

 .top{

   top:20px;

   left:20px;

   background-color:yellow;

   opacity:.6;

   z-index:2;

   &:hover{

     opacity:.3;

   }

 }

 .astralwebLink{

   top:30px;

   left:30px;

   background:purple;

   opacity:.5;

   z-index:1;

   

   &:hover{

     opacity:.3;

     border:dotted 15px yellow;

     

   }

 }

}

 

下圖為滑上層結果:

使用CSS3 pointer-events 02

 

下圖為滑入下層結果(不包含上層覆蓋的範圍):

在CSS3上用pointer-events 03

 

以上是很簡單的兩個重疊的區塊,當滑鼠點擊上層黃色區塊或是下面那層此色的區塊時都各有他們滑入的作用。

 

現在我們要下層的區塊不被上層影響,只要有滑到下層的的區塊,即使被上層覆蓋也會滑入作用,作法是在class=”top”加入今天介紹的屬性pointer-events

.top{

pointer-events:none;

}

那麼只要滑鼠滑入有下層範圍即使被上層覆蓋也會顯示下層滑入效果喔。

在CSS3上用pointer-events 03

以上是如何在CSS3上使用pointer-events的應用,更多關於電商營運相關的知識,別忘訂閱歐斯瑞電子報和追蹤我們的粉絲專頁喔!

 

延伸閱讀:

 如何利用CSS3原生網格系統快速排版

 

 

以上內容由Astralweb 歐斯瑞編寫製作

 000

推薦文章

Category:
  網站設計與開發

留下回應

你的電子郵件地址不會被公開.

請到您的信箱確認,即可完成訂閱。