问题描述
我的 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
,它应该可以工作。