將<path>置於懸停前面（當被其他元素遮擋時）

我今天早上看着NYTimes interactive on state subsidies，注意到即使一個狀態被一個點遮擋，它也會在懸浮狀態下移動。將<path>置於懸停前面（當被其他元素遮擋時）

例如馬薩諸塞州的覆蓋點還部分覆蓋新罕布什爾州，但你的時候，當你的鼠標到新罕布什爾州的覆蓋部分，新罕布什爾州提出。

你怎麼想他們實現這一目標？這些點根據它們在DOM中的順序位於狀態輪廓的前面。我想可能有第二組狀態的概括一切之上，聽這將引發潛在的形狀鼠標懸停，但這似乎並不如此。

我需要在我正在開發的應用程序中實現類似的功能，並且對使用SVG元素的優雅方式感到好奇。

謝謝。

2012-12-04 Al R.

這並不像看起來那麼複雜，只是給你的點一個'pointer-events：none;'的css屬性。這會阻止鼠標知道它們存在，所以你可以將鼠標懸停在它們後面 – Andy

這太棒了，謝謝 –

是的。唯一的一點是，IE不支持這個css道具。甚至IE9。 http://stackoverflow.com/questions/5855135/css-pointer-events-property-alternative-for-ie – meetamit

As noted通過Andy在紐約時報圖形圓有沒有的CSS指針的事件屬性：

circle { 
    pointer-events: none; 
}

使用this method將帶來正面的行爲可以在鼠標懸停功能來實現：

stateShape.on("mouseover",function(){this.parentNode.appendChild(this);})

2013-07-11 22:28:25 Yanofsky

回答