Opacity update on all d3.svg.circles except for the class hovered
<p>Completely stuck on this problem.
The goal is to be able to highlight certain data points on a scatterplot (based on cluster) when the user hovers onto that class of data. I have simplified the problem into the code below. Two clusters of data.</p>

<p>Here is my JS code:</p>

<pre><code>var svg = d3.selectAll("body").append("svg").attr("width",500).attr("height",500);

svg.append("circle").attr("cx",50).attr("cy",60).attr("r",5).attr("id","circle1");
svg.append("circle").attr("cx",70).attr("cy",100).attr("r",5).attr("id","circle1");
svg.append("circle").attr("cx",50).attr("cy",90).attr("r",5).attr("id","circle2");
svg.append("circle").attr("cx",70).attr("cy",70).attr("r",5).attr("id","circle2");
</code></pre>

<p>Here is my CSS code:</p>

<pre><code>svg:hover circle {
  opacity: 0.5;
}
svg:hover #circle1:hover ~ #circle2 {
  opacity: 1;
}
svg:hover #circle2:hover ~ #circle1 {
  opacity: 1;
</code></pre>

<p>The first two CSS components work but hovering on circle2's does not change the opacity of circle1's.</p>