如何解决悬停和鼠标悬停不适用于新创建的 DIV
我的 javascript 游戏中有一个物品清单。
我正在努力使鼠标悬停在库存项目上时,它会显示该项目的文本覆盖描述。
我的想法是在将项目添加到库存后使用鼠标悬停“显示()”函数附加一个 div,但由于某种原因它不起作用。它适用于 ::before 或 ::after div 的项目文本,但即使在使用 Z-Index.etc 时,我似乎也无法获得项目图像的文本覆盖
我在 CSS 中尝试了一个简单的 :hover,但也无法让它以这种方式工作。
我可以从一开始就“生成”带有顶部文本的项目,但我似乎无法得到它,因此文本仅在鼠标悬停时出现。
希望我已经以一种有意义的方式解释了它:
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>
解决方法
您还没有定义类 on
。
我看到你已经定义了 .itemtext-on
。
如果这是一个错字,请将其更改为 .itemtext.on
,它应该可以工作。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。