Css懸停有時不能在svg路徑上工作

我得到了一個帶有路徑的svg，並且我將css懸停在它們上面，但懸停有時可以工作，有時候不會。Css懸停有時不能在svg路徑上工作

可能是什麼問題？

<div id="map_wrapper"> 
<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg"> 
<!-- Created with SVG-edit - http://svg-edit.googlecode.com/ --> 
<g> 
<title>Layer 1</title> 
<path id="svg_3" d="m200,114l-114,95l26,97l99,20c0,0 19,-67 19,-68c0,-1 -1,-5 4,-8c5,-3 39,-10 40,-10c1,0 13,-2 14,-9c1,-7 -4,-36 -8,-40c-4,-4 -23,-15 -27,-17c-4,-2 -24,-16 -24,-23c0,-7 -1,-15 -1,-21c0,-6 -6,-19 -7,-19c-1,0 -21,3 -21,3z" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" stroke="#000000" fill="none"/> 
<path id="svg_4" d="m244,101c0,0 14,55 16,56c2,1 22,11 24,13c2,2 23,17 24,18c1,1 1,28 -1,31c-2,3 -3,25 -9,30c-6,5 -32,14 -35,14c-3,0 -8,5 -10,8c-2,3 -10,37 -10,37c0,0 7,10 16,15c9,5 53,12 59,12c6,0 30,0 40,-8c10,-8 34,-7 35,-31c1,-24 1,-48 1,-65c0,-17 -13,-61 -15,-66c-2,-5 -21,-21 -21,-23c0,-2 34,-20 44,-15c10,5 29,24 33,28c4,4 10,20 16,5c6,-15 28,-31 -1,-46c-29,-15 -25,-24 -55,-25c-30,-1 -42,-5 -53,-5c-11,0 -46,-2 -52,1c-6,3 -46,16 -46,16z" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" stroke="#000000" fill="none"/> 
<path id="svg_5" d="m428,180c0,0 -3,52 -4,53c-1,1 -2,27 -2,31c0,4 -8,29 -11,34c-3,5 -15,36 -21,38c-6,2 -77,18 -81,18c-4,0 -68,0 -68,7c0,7 -1,18 8,23c9,5 23,9 45,14c22,5 97,12 111,6c14,-6 44,-20 55,-30c11,-10 28,-28 37,-42c9,-14 14,-15 23,-40c9,-25 16,-109 12,-114c-4,-5 -32,-12 -45,-9c-13,3 -59,11 -59,11z" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" stroke="#000000" fill="none"/> 
</g> 
</svg> 
</div>

和CSS

path{ 
    fill:none; 
    stroke:black; 
} 
path:hover{ 
    fill:red; 
    stroke:blue; 
}

這裏是小提琴，只需將鼠標懸停他們迅速。

http://jsfiddle.net/gWXbn/

來源

2013-07-12 ArmeniaH

測試它在火狐，Chrome，最後版本 – ArmeniaH

有沒有填充，因此內部不捕獲由默認的鼠標事件，因此懸停沒有相應的措施。更改pointer-events所有將在這種情況下，解決這個問題：

path{ 
    fill:none; 
    stroke:black; 
    pointer-events:all; 
}

來源

2013-07-12 13:40:28

啊，指針事件時，這總是對我的作品！ –

如果您只想觸發筆畫/可見的事件，請使用「pointer-events：stroke;」或「指針事件：可見」。 – Frizi

你救了我的命！非常感謝：） – Etienne

以下固定我的SVG和jQuery懸停和相似的問題。

svg, svg * { 
    pointer-events: none; 
}

來源

2016-09-09 12:18:24

使用對象標記

object { 
    pointer-events: none; 
}

來源

2017-12-02 20:19:17 judehall

Css懸停有時不能在svg路徑上工作

回答

相關問題