悬停和onmouseover无法使用新创建的DIV

Question

我有一个javascript游戏中的物品清单。

我正试图使其在鼠标悬停在库存项目上时显示该项目的文本覆盖描述。

我的想法是在div中添加mouseover"；reveal(("一旦项目被添加到库存中，但由于某种原因它不起作用。它适用于div之前或之后的项目文本，但即使在使用Z-Index.etc 时，我似乎也无法获得项目图像的文本覆盖

我尝试过一个简单的方法：在CSS中悬停，但也无法实现。

我可以"；"产卵"；从一开始文本就在上面的项目我似乎无法得到它，所以文本只出现在鼠标上。

希望我已经用一种有意义的方式解释了它：

const textElement = document.getElementById('text');
const imgElement = document.getElementById('room-image');
const optionButtonsElement = document.getElementById('option-buttons');
const button3 = document.getElementById('TEST');
const inventory = document.getElementById('inventory');
const itemContainer = document.getElementById('imageContainer');
const itemText = document.getElementById('itemtext');
let textArrayIteration = 1

function reveal() {
itemText.classList.toggle('on');
}
//ADDING OBJECT VALUE TO INVENTORY///
function pullValue() {
var node = document.createElement("P");
var textNodeItems = Object.values(items);
var textNode = (document.createTextNode(textNodeItems));
node.appendChild(textNode);
document.getElementById("inventory").appendChild(node);
//ASSIGNING THE IMAGE AND DIVS FOR THE ITEM//
if (inventory.innerHTML.indexOf("test") !== -1) {
var a = document.createElement("div")
a.setAttribute("id", "Div1");
var iconUrl = document.createElement("img");
iconUrl.src = "test.jpg";
a.appendChild(itemText);
a.appendChild(iconUrl);
inventory.appendChild(a);
node.style.display = "none";
}

.itemtext-on {
position: absolute;
display: none;
z-index: 200;
}
.itemtext {
position: absolute;
display: block;
font-size: 80px;
top: 50px;
color: red;
z-index: 200;
}

<div id="itemtext" class="itemtext" onmouseover="reveal()">test</div>

Answer 1

您尚未定义类on
我看到您已经定义了.itemtext-on
如果这是一个拼写错误，请将其更改为.itemtext.on，它应该可以工作。