如何解决没有html代码的弹出图像只有css和javascript
所以我有一个使用 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%;
}
但这不是弹出图像,也不相同。 有人知道解决方案吗?
解决方法
如果弹出窗口是指单独的浏览器窗口,则不是..
但是如果您想在元素悬停时在光标旁边显示图像,您可以将其显示为伪元素中的背景。
.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');
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。