悬停对SVG组元素的影响

问题描述：

请原谅我的无知，SVG对我来说是非常新的。我试图让我的内联SVG中的一组元素产生悬停效果。每组元素都是一组圈子。我可以用CSS实现这种悬停效果，但显然这只有当鼠标放置在一个圆上时才会起作用。我想要的是当鼠标移过包含圆圈的整个区域时的效果，所以空间和圆圈组合在一起。悬停对SVG组元素的影响

<style> 
svg { 
    height: 220px; 
    width: 400px; 
    background: grey; 
} 

.na circle, 
.as circle { 
    fill: white; 
} 

.na:hover circle { 
    fill: blue; 
} 
</style> 

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> 
    <g class="na"> 
    <circle cx="35%" cy="2.85%" r="2.8" /> 
    <circle cx="36.75%" cy="2.85%" r="2.8" /> 
    . 
    . 
    <circle cx="38.5%" cy="8.55%" r="2.8" /> 
    <circle cx="40.25%" cy="8.55%" r="2.8" /> 
    </g>  
</svg>

http://jsfiddle.net/c3EaX/

在一组，你它们之间的圈子和空间去悬停闪烁移动鼠标时，请参阅。

如何让鼠标悬停在整个区域？有没有可用于此的SVG元素？

您是否尝试过''？ – robertc

答

你需要把东西，以涵盖缺失的地区。

较容易的方法是这样：

.na circle, 
.as circle { 
    fill: white; 
    stroke: transparent; 
    stroke-width: 4px; 
}

updated fiddle

太棒了。很简单。我一直在尝试精心制作的东西，比如附带的路径，如果js将交互联系在一起。谢谢。 –

聪明的男人。希望我能给你多个投票。 –

好的提示，但是这不适用于中风的线条！ – Ardian

答

接受的答案并没有为我工作。我发现以下解决方案：

g { 
    pointer-events: bounding-box; 
    opacity: 0.4; 
} 
g:hover { 
    opacity: 1; 
}

悬停对SVG组元素的影响

相关推荐