javascript - javascript-在鼠标悬停时在具有特定类的元素后插入div

我知道有一种非常简单的jQuery方式可以解决此问题，但是现在我想了解为什么我的代码无法正常工作：

function insertAfter(referenceNode, newNode) {
    referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}

var menuHelp = document.querySelector(".menu_help");


for (var i = 0;i<menuHelp.length;i++){

menuHelp[i].onmouseenter = function(){
    menuHelpPopup = document.createElement("div");
    menuHelpPopup.setAttribute('class','menu_help_popup');
    menuHelpPopup.innerHTML = "test";
    insertAfter(menuHelp[i], menuHelpPopup);
}

menuHelp[i].onmouseleave = function(){
    menuHelpPopup.remove();
}

}

我想做的是创建一个弹出窗口，并将其插入到鼠标悬停在具有特定类的元素之后。

演示http://jsfiddle.net/r5e8rvkg/

最佳答案

请确保menuHelp是一个nodeList，所以您应该使用document.querySelectorAll;。
当鼠标进入时，i的值为menuHelp.length。所以您应该使用它，例如insertAfter（this，menuHelpPopup）

关于javascript - javascript-在鼠标悬停时在具有特定类的元素后插入div，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/27715473/