всплывающее изображение без html-кода, только css и javascript

Question

Итак, у меня есть виртуальный тур 360 с использованием pannellum, у меня есть код этой точки доступа в css

      .custom-hotspot {
    height: 30px;
    width: 30px;
    border-radius: 50%;
    background: rgb(253, 253, 255);
}

Я хотел бы, чтобы при нажатии на всплывающее окно всплывающее изображение, но без использования тегов html, только css и javascript, я пытаюсь использовать это

      .custom-hotspot:hover {
  content: url(https://i.ibb.co/5c9zFfq/DCIM-100-MEDIA-DJI-0293-JPG.jpg); /* no need for qoutes */
  width: 100px;
  height: 100px;
  border-radius: 20%;
}

но это не всплывающее изображение и это не то же самое. Кто-нибудь знает решение для этого?

Answer 1

Если под всплывающим окном вы подразумеваете отдельное окно браузера, то нет.

Но если вы хотите отобразить изображение рядом с курсором при наведении на элемент, вы можете отобразить его как фон в псевдоэлементе.

      .custom-hotspot:hover::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
  border-radius: 20%;
  background-image: url(https://i.ibb.co/5c9zFfq/DCIM-100-MEDIA-DJI-0293-JPG.jpg);
}

Убедитесь, что родительский элемент имеет определенное свойство position, например position: relativeили же absolute. В противном случае изображение будет отображаться в верхней части ближайшего прародителя, для которого оно определено.

редактировать..

      .clicked::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
  border-radius: 20%;
  background-image: url(https://i.ibb.co/5c9zFfq/DCIM-100-MEDIA-DJI-0293-JPG.jpg);
}

Javascript:

      // this gets HTML collection of all elements with the 'custom-hotspot' class
const elementCollection = document.getElementsByClassName('custom-hotspot');

// add a click listener to each element
elementCollection.forEach(e => {
   e.addEventListener('click', handleClick, {passive: true});
});

/// here we toggle our 'clicked' class
function handleClick(event) {
   // if '.target' does not work as expected try '.currentTarget'
   event.target.classList.toggle('clicked');
}