将鼠标悬停在svg上影响其他元素属性不起作用

Question

HTML:

<div>
<svg class="velveti-grid-point" width="100" height="100" style="height: 120px; width: 625px;">
       <circle class="myPoint" cx="500" cy="105" r="5" fill="#80E1EE" />
</svg>
    <div class="theContainer">bg-color</div>
</div>

CSS:

.myPoint:hover + .theContainer {
    background-color: black;
}

Problem: When i am hovering on the blue svg circle the background-color should be displayed on the text, but with svg it doesn't work. What is the problem? what do i need to do?

The demo: http://jsfiddle.net/wy6y66ox/

Answer 1

This has nothing to do with SVG per se .

+ is referred to as an adjacent selector. It will select only the element that is immediately preceded by the former element.

Because .myPoint is not a sibling of .theContainer your selector will not work.

You would need javascript in this instance.

Answer 2

Paulie_D is right.You have to use Javascript.

HTML

<div>
<svg  class="velveti-grid-point" width="100" height="100" style="height: 120px; width: 625px;">
       <circle id="svgid" class="myPoint" cx="500" cy="105" r="5" fill="#80E1EE" />
</svg>
    <div id="divcolor" class="theContainer">bg-color</div>
</div>

JS

var svg = document.getElementById( 'svgid' );
var div = document.getElementById( 'divcolor' );
svg.onmouseover = function() {


  div.style.backgroundColor = 'blue';
};
svg.onmouseout = function() {

  div.style.backgroundColor = 'transparent';
}; 

Demo Here