javascript - 当鼠标悬停在特定 div 上时，如何添加包含消息的新 div？

Question

我想在将鼠标悬停在特定文本上时显示一条消息。我已经可以在标记中包含所需的 div 并将 opacity 设置为 "0" 并将其转换为 "1" 当文本悬停在上方时。但是我该如何通过 JavaScript 将整个消息添加到 div 中呢？

.orange {
     display: block;
}

<div class="orange">ORANGE</div>

var check = document.getElementById('#orange');
if (check.matches(':hover')) {
    var checked = document.createElement('div');
    checked.innerHTML = "HELLO";
    checked.style.display = "block";
}

这是笔:https://codepen.io/callmesingham/pen/ymNeKg

Answer 1

第一个 document.getElementById('#orange'); 是使用 id 和 document.getElementById 获取元素的错误方法。其次，使用 mouseover 和 mouseout 事件并创建带有 id 的 dom 元素，这样一旦鼠标移出，动态创建的元素也会被删除。

var check = document.getElementById('orange');

check.addEventListener('mouseover', function(e) {
  var checked = document.createElement('div');
  checked.id = 'hoverElem';
  let txtNode = document.createTextNode('Hello')
  checked.appendChild(txtNode)
  document.body.appendChild(checked)
});
check.addEventListener('mouseout', function(e) {
  document.getElementById('hoverElem').remove()
})

#orange {
  display: block;
}

<div id="orange">ORANGE</div>