懸停對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元素？

來源

2013-10-08 Andy Place

您是否嘗試過''？ – robertc

你需要把東西，以涵蓋缺失的地區。

較容易的方法是這樣：

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

updated fiddle

來源

2013-10-08 18:10:19 vals

太棒了。很簡單。我一直在嘗試精心製作的東西，比如附帶的路徑，如果js將交互聯繫在一起。謝謝。 –

聰明的男人。希望我能給你多個投票。 –

好的提示，但是這不適用於中風的線條！ – Ardian

接受的答案並沒有爲我工作。我發現以下解決方案：

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

來源

2017-10-03 15:39:18

懸停對SVG組元素的影響

回答

相關問題