Question

我的 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>

Answer 1

您还没有定义类 on。
我看到你已经定义了 .itemtext-on。
如果这是一个错字，请将其更改为 .itemtext.on，它应该可以工作。

悬停和鼠标悬停不适用于新创建的 DIV

1 个答案: