如何实现Hover蓝色方块时同时切换多个隐藏SVG元素的显示状态？

问题根源 #

你当前的代码里，虽然给红色方块和文本都加了hide类，但缺少对应的隐藏样式定义，且悬停触发逻辑没有同时覆盖两个元素，导致只有文本能正常显示。

方案一：纯CSS实现（推荐，更简洁） #

这种方式无需额外JS，利用CSS的兄弟选择器就能实现悬停触发多个元素显示。

首先添加基础样式，定义隐藏状态：

.hide {
  display: none;
}

/* 当蓝色方块被悬停时，显示所有同级的.hide元素 */
.HoveringClass:hover ~ .hide {
  display: block;
}

你的JS代码已经是先创建蓝色方块，再添加文本和红色方块，正好满足CSS兄弟选择器~只能选择后续同级元素的要求，结构没问题。

完整可运行代码：

<svg id="svg_canvas" viewBox="0 0 1200 600" width="1200px" height="600px" xmlns="http://www.w3.org/2000/svg"></svg>

<style>
.hide {
  display: none;
}

.HoveringClass:hover ~ .hide {
  display: block;
}
</style>

<script>
var canvas = document.getElementById("svg_canvas");

var square = document.createElementNS('http://www.w3.org/2000/svg',"rect");
square.setAttribute('x', 100)
square.setAttribute('y',  100)
square.setAttribute('width', 100)
square.setAttribute('height', 100)
square.setAttribute("fill", "blue");
square.setAttribute("class", "HoveringClass");
canvas.appendChild(square);

var hover_text = document.createElementNS('http://www.w3.org/2000/svg', "text");
hover_text.setAttribute('id','termin_text');
hover_text.setAttribute('x', 200)
hover_text.setAttribute('y',  200)
hover_text.setAttribute("class", "hide");
hover_text.textContent = "hello world";
canvas.appendChild(hover_text);

var square2 = document.createElementNS('http://www.w3.org/2000/svg',"rect");
square2.setAttribute('id','termin_rect' + 1);
square2.setAttribute('x', 50)
square2.setAttribute('y',  50 )
square2.setAttribute('width', 50)
square2.setAttribute('height', 50)
square2.setAttribute("fill", "red");
square2.setAttribute("class", "hide");
canvas.appendChild(square2);
</script>

方案二：JavaScript事件监听实现 #

如果你的元素结构比较复杂（比如红色方块和文本不在蓝色方块的同级位置），可以用JS事件监听来手动控制显示状态：

修改JS部分，添加鼠标进入/离开事件：

var canvas = document.getElementById("svg_canvas");

var square = document.createElementNS('http://www.w3.org/2000/svg',"rect");
square.setAttribute('x', 100)
square.setAttribute('y',  100)
square.setAttribute('width', 100)
square.setAttribute('height', 100)
square.setAttribute("fill", "blue");
square.setAttribute("class", "HoveringClass");
canvas.appendChild(square);

var hover_text = document.createElementNS('http://www.w3.org/2000/svg', "text");
hover_text.setAttribute('id','termin_text');
hover_text.setAttribute('x', 200)
hover_text.setAttribute('y',  200)
hover_text.setAttribute("class", "hide");
hover_text.textContent = "hello world";
canvas.appendChild(hover_text);

var square2 = document.createElementNS('http://www.w3.org/2000/svg',"rect");
square2.setAttribute('id','termin_rect' + 1);
square2.setAttribute('x', 50)
square2.setAttribute('y',  50 )
square2.setAttribute('width', 50)
square2.setAttribute('height', 50)
square2.setAttribute("fill", "red");
square2.setAttribute("class", "hide");
canvas.appendChild(square2);

// 监听鼠标进入事件，显示两个元素
square.addEventListener('mouseenter', () => {
  hover_text.style.display = 'block';
  square2.style.display = 'block';
});

// 监听鼠标离开事件，隐藏两个元素
square.addEventListener('mouseleave', () => {
  hover_text.style.display = 'none';
  square2.style.display = 'none';
});

同时别忘了添加基础隐藏样式：

.hide {
  display: none;
}

关键注意事项 #

• 必须确保hide类的样式设置了display: none，这是元素隐藏的基础。
• CSS方案要求触发悬停的蓝色方块在目标元素（文本、红方块）的前面，否则兄弟选择器无法生效；如果结构复杂，可以给SVG容器加类，用后代选择器控制。
• JS方案不受元素结构限制，适合需要动态逻辑或复杂布局的场景。

内容的提问来源于stack exchange，提问作者marco