Wie ein CSS-Hover auf eine SVG-Karte setzen

Question

ich dieses Beispiel bin mit:

https://bl.ocks.org/mbostock/raw/3306362/

Wie füge ich ein Schweben zu den Landkreis? Ich habe versucht:

.counties:hover { 
    fill:red; 
} 

path d:hover { 
    fill:red; 
} 

und einige andere. kein Glück. Danke.

Answer 1

Zwei Probleme:

1. counties ist die Klasse des <g> Element, nicht die Wege. Stellen Sie also zunächst für jeden Pfad eine Klasse (wie county) ein;

2. Dies ist Ihr Hauptproblem hier: Es gibt eine style() für diese Pfade in der D3-Code, die daher eine nachfolgende Regel ist. Also, wenn Sie Ihre CSS-Regel, dass die nachfolgende Regel außer Kraft setzen möchten, verwenden Sie !important:

   .county:hover { 
       fill: red !important; 
   } 
   

Oder alternativ, dass style() für einen attr() im Code ändern.

Verwenden Sie nicht path:hover, da auch Pfade für die Zustände vorhanden sind. Auch gibt es kein d Element (path d:hover in Ihrer Frage) weder in HTML noch in SVG. d ist das Attribut eines Pfades.

Hier ist die aktualisierte bl.ocks mit diesen zwei Änderungen: https://bl.ocks.org/anonymous/9ebef1b8e2a11bd170c50bb4a3440628/8923484fd3715aa474f1eb31184d11da863e24dc