我想用不同的文本悬停(显示和隐藏)多个ids

<div id="text1">文本1</div>
<div id="text2">文本2</div>
<div id="text3">文本3</div>

#text1, #text2, #text3 {
  display: none;
}

.hover-text {
  display: block;
}

var elements = document.querySelectorAll("[id^='text']");

for (var i = 0; i < elements.length; i++) {
  elements[i].addEventListener("mouseover", function() {
    this.classList.add("hover-text");
  });

  elements[i].addEventListener("mouseout", function() {
    this.classList.remove("hover-text");
  });
}