主页 / coding / 问题 / 79078385
Accepted
marco
Asked: 2024-10-11 21:13:17 +0800 CST

一次切换多个隐藏物体

  • 772

我有一个蓝色方块，当我将鼠标悬停在它上面时，应该会出现另外两个物体。

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

如何让鼠标悬停在蓝色方块上时，红色方块和文本都出现？

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>

javascript

1 个回答

  1. Best Answer

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

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

    我为蓝色方块添加了 mouseover 和 mouseout 事件监听器。当您将鼠标悬停在蓝色方块上时，文本和红色方块都会显示出来，而当您将鼠标移出时，它们又会隐藏起来。

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

    • 1

相关问题