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;
}

问题：当我在蓝色svg圈上盘旋时，应该在文本上显示背景颜色，但是使用svg它不起作用。问题是什么？我需要做什么？

演示：http://jsfiddle.net/wy6y66ox/

Answer 1

这与SVG 本身无关。

+被称为相邻选择器。它将仅选择前一个元素前面的元素。

由于.myPoint不是.theContainer的兄弟，因此您的选择器无效。

在这种情况下你需要javascript。

Answer 2

Paulie_D是对的。你必须使用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

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

2 个答案: