37

我有一个带有路径的 svg，并且我有 css 悬停在它们上面，但悬停有时有效，有时无效。

可能是什么问题？

<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/

4

3 回答 3

72

没有填充，因此默认情况下内部不会捕获鼠标事件，因此悬停不会对此做出反应。在这种情况下，将指针事件更改为 all 将解决它：

path{
    fill:none;
    stroke:black;
    pointer-events:all;
}
于 2013-07-12T13:40:28.037 回答
6

以下解决了我的 svg 和 jQuery hover 等问题。

svg, svg * {
  pointer-events: none;
}
于 2016-09-09T12:18:24.020 回答
0

使用对象标签时，这总是对我有用

object {
    pointer-events: none;
}
于 2017-12-02T20:19:17.863 回答