懸停到自定義形狀。如何？

如何創建一個僅在三角形邊界內觸發懸停事件的CSS三角形（例如）？懸停到自定義形狀。如何？

在實踐中，它將位於遊戲和其上的不同對象上，如果我們將它懸停，它應該模糊。

請注意，在demo中，span:hover樣式在進入元素的矩形邊界時觸發，而不是三角形。

來源

2013-05-07 Alexander Mironenko

你想讓div做三角形嗎？ – PraJen 2013-05-07 06:21:08

我不認爲你可以用元素來做，並且可能不得不使用'canvas'。 – 2013-05-07 06:32:56

有一些標籤可以工作，'map'和'area'。 http://www.w3schools.com/tags/tag_area.asp你也可以繪製一個三角形。 – 2013-05-07 06:42:42

您可以嘗試使用SVG polygon創建形狀，並且:hover將尊重其「真實」區域。

注意這是一個純css + SVG解決方案只適用於自定義形狀。和自定義形狀它不是純CSS創建，但SVG ...

HTML

<svg width="120" height="120" 
    viewPort="0 0 120 120" version="1.1" 
    xmlns="http://www.w3.org/2000/svg"> 
    <polygon points="60,0 0,120 120,120" id="shape"/> 
</svg>

很簡單的CSS的一點點！

#shape:hover{fill:red;}

這是working fiddle。

瀏覽器支持： This question一些光發送到瀏覽器的支持。沒有可接受的答案，但據我所知，對於不支持SVG的瀏覽器，有非常有用的鏈接和替代方案。

來源

2013-05-07 08:29:30 Arkana

懸停到自定義形狀。如何？

回答

相關問題