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

Question

所以我有一个使用 pannellum 的 360 虚拟游览，我在 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

如果弹出窗口指的是单独的浏览器 window 则否..

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

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

确保 parent 元素具有定义的位置属性，如 position: relative 或 absolute。否则图像将显示在最近定义的 grandparent 的顶部。

编辑..

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

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

popup image with no html code only css and javascript

html

javascript

css

popup

pannellum