没有html代码的弹出图像，只有css和javascript

所以我有一个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%;
}

但这不是一个弹出图像，它也不一样。

---

有人知道这个问题的解决方案吗？

如果“弹出”是指单独的浏览器窗口，那么没有

但是，如果要在元素悬停时显示光标旁边的图像，可以将其显示为伪元素中的背景

.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: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');
}

---

行了！，但现在的问题是，图像如何保持静态，比如当你单击它时，它会出现，当你再次单击它时，它会消失尝试使用伪选择器

：focus

，而不是

：hover

，它不适用于focusright。。这只适用于输入。。不要使用

：hover

，而是编写一个类似

的类。单击
。然后需要使用javascript.edited my answere将
.clicked
类添加到clicked元素中