分享6篇關於pointer屬性的介紹

其實早知道這個屬性，但一直沒有去研究過。今天剛好在twitter看到這個詞，就去研究了下，正好解決了目前遇到的一個小難題，所以分享下。嗯，其實這是比較簡單的CSS3屬性。來看下我對pointer屬性的詳細介紹。

1. 使用CSS的pointer-events屬性實現滑鼠穿透效果的技巧分享

首先，上圖是某東商城的商品列表頁中的商品，在右上角有一個「驚爆價」的圖標，大家都知道這是用一個標籤在絕對定位上去的，會遮住下面的商品圖片，滑鼠移到「驚爆價」圖片是點擊不了後面圖片的鏈接的，當然我們也可以給這個圖標也加上鏈接，這樣就能解決問題。 （今天可不是說這麼簡單的事情哦，我們繼續）

現代瀏覽器裡CSS的職責範圍和JavaScript的越來越模糊分不清。例如CSS裡-webkit-touch-callout屬性在iOS裡能禁止當用戶點擊時彈出氣泡框。而本文要說的pointer-events的風格更像JavaScript，它能夠：

1.阻止使用者的點擊動作產生任何效果
2.阻止預設滑鼠指標的顯示
3.阻止CSS裡的hover和active狀態的變化觸發事件
4.阻止JavaScript點擊動作觸發的事件
一個CSS屬性能做所有的這麼多事情！

2. CSS更改滑鼠為手狀樣式介紹

在自行設定的p或其他標籤中，為了更好的體驗效果，會在滑動過程中，將滑鼠變成手勢

簡單總結下css對應的樣式。

所在的p中，加入cursor:pointer即可。

3. 關於css中pointer-events屬性的怪異行為_html/css_WEB-ITnose

在我的記憶中pointer-events就是用來進行事件穿透的，也就是說，如果為父元素設定了pointer-events:none，那麼父元素就不再監聽滑鼠事件事件(類似touch,click這樣的)。

需要這樣做的情況，通常是我們想要「穿透」父層，直接點擊子元素時，父元素會當作什麼也沒有發生一樣。這是我以前的知識體系中所收集的資訊。現在看來也沒有錯，只是這不完整。

4. css屏蔽元素的滑鼠事件pointer-events_html/css_WEB-ITnose

// 屏蔽點擊

$('body').css('pointer-events','none');

//恢復預設

$('body').css('pointer-events','auto');

用途： 可以在彈出層的時候或fixed定位時，設定下面元素的滑鼠事件

5. 神奇的css屬性pointer-events_html/css_WEB-ITnose

絕對定位元素蓋住連結或加入某事件handle的元素後，那麼該連結的預設行為（頁面跳躍）或元素事件將不會被觸發。
現在Firefox3.6+/Safari4+/Chrome支援一個稱為pointer-events的css屬性。使用該屬性可以決定是否能穿透絕對定位元素去觸發下面元素的某些行為

6. cursor 滑鼠樣式??屬性_html/css_WEB-ITnose

#我們在DIV CSS佈局時候，我們會遇到對物件內滑鼠指標遊標進行控制，例如滑鼠經過指標變成手指形狀等樣式，接下來我們介紹滑鼠指標樣式cursor控制。系統預設滑鼠指針樣式外，可以透過CSS設定圖片為滑鼠指針，常見有些網站滑鼠指標是各種小圖片樣式，當然這個是透過css cursor設定滑鼠樣式。

pointer屬性的相關問答：

#1. 有關css3 pointer-events：none;屬性的問題

2. objective-c - RAC: incompatible block pointer types sending

##【相關推薦】

#1. 

php.cn獨孤九賤（2）－css影片教學

2. 

css pointer控制在firefox下顯示手型的程式碼_基礎教學

以上是分享6篇關於pointer屬性的介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！