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

Hover on svg for affecting the other element property doesn't work

本文关键字：元素 其他 属性 不起作用 影响 悬停 鼠标 svg      更新时间：2023-09-26

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/

这与SVG本身无关。

CCD_ 1被称为相邻选择器。它将只选择前面紧跟前一个元素的元素。

因为.myPoint不是.theContainer的同级，所以选择器将无法工作。

在这种情况下，您需要javascript。

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

此处演示

相关文章：