javascript - 仅将鼠标悬停在正方形上时如何显示正方形 id 的值？

Question

我不允许在此作业中使用任何 html。这是我到目前为止在 javascript 中的内容：

document.addEventListener("DOMContentLoaded", function () {

    let button = document.createElement('button');
    let btnText = document.createTextNode('Add Square');
    button.appendChild(btnText);
    document.body.appendChild(button);

    let sqContainer = document.createElement('div');
    sqContainer.classList.add('container')
    document.body.appendChild(sqContainer)

    let num = 0

    button.addEventListener("click", function () {
        let square = document.createElement('div')
        square.classList.add('square')
        sqContainer.appendChild(square)
        document.body.appendChild(sqContainer)
        num++
        square.setAttribute('id', num)

        let idDisplay = document.createElement('span')
        idDisplay.classList.add('id-display')
        idDisplay.innerText = num
     })
})

这会创建水平穿过屏幕的框，直到它们到达页面的末尾，然后将其包裹起来，我已使用 flex box 将其归档。这是我的CSS：

.container {
    display: flex;
    flex-wrap: wrap;
}

.square {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px;
    width: 100px;
    margin-right: 10px;
    margin-top: 10px;
    background-color: purple;
}

.square:hover {
   display: num;
}

以下是逐字说明：当鼠标悬停在正方形上时，正方形的 id 值应显示在正方形的中心，当光标不再在正方形上时消失

标签： javascriptcssdom

Answer 1

您可以使用包含属性的伪元素。将其设置为默认设置，然后在正方形悬停时更改其不透明度。id opacity: 0

document.addEventListener("DOMContentLoaded", () => {
  const button = document.createElement('button');
  const sqContainer = document.createElement('div');

  button.innerText = "Add Square";
  sqContainer.classList.add('container');

  document.body.appendChild(button);
  document.body.appendChild(sqContainer);

  let num = 0

  button.addEventListener("click", () => {
    num++
    const square = document.createElement('div')
    square.classList.add('square')
    sqContainer.appendChild(square)
    square.setAttribute('id', num)
  })
})

.container {
  display: flex;
  flex-wrap: wrap;
}

.square {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;
  width: 100px;
  margin-right: 10px;
  margin-top: 10px;
  background-color: purple;
  position: relative;
}

.square:before {
  content: attr(id);
  opacity: 0;
  transition: opacity .25s ease;
}

.square:hover:before {
  opacity: 1
}