一次切换多个隐藏对象

Question

我有一个正方形，当我将鼠标悬停在它上面时，应该会出现另外两个对象。

到目前为止，只有一个对象（文本）出现，而另一个对象（红色方块）仍然隐藏。

如何在将鼠标悬停在蓝色方块上时同时显示红色方块和文本？

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

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

Answer 1

要将鼠标悬停在蓝色方块上时，要使红色方块和文本同时出现，您需要为鼠标事件添加事件侦听器

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

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

  // Add hover event listeners
  square.addEventListener('mouseover', function() {
    hover_text.setAttribute("class", "show");
    square2.setAttribute("class", "show");
  });

  square.addEventListener('mouseout', function() {
    hover_text.setAttribute("class", "hide");
    square2.setAttribute("class", "hide");
  });
</script>

<style>
  .hide {
    display: none;
  }
  
  .show {
    display: inline;
  }
</style>

我已将鼠标悬停和鼠标移出事件侦听器添加到蓝色方块。当您将鼠标悬停在其上时，文本和红色方块都会显示，当您将鼠标移出时，它们将再次隐藏。

hide类使用display:none;隐藏元素。 show类使用display: inline;使元素可见。