Как отобразить значение идентификатора квадрата при наведении на него курсора?

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
     })
})

. Это создает поля, которые go располагаются по горизонтали на экране до тех пор, пока не достигают конца страницы, которую они затем оборачивают, и я заархивировал ее, используя гибкая коробка. Вот мое 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 квадрата должно отображаться по центру в квадрате и исчезать, когда курсор больше не находится над площадь

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
}