我正在建立我的第一个网站,我想添加一个功能。我的意思是onmouse效果,当鼠标悬停在图像上方时-它显示图像的详细信息,但不是作为对图像的悬停效果,而是鼠标旁边的新块。
该网站是使用Django作为后端部分开发的,并且在前端部分使用javascript进行引导。我已经在寻找任何解决方案,但找不到任何有用的方法。
我特别在寻找一些提示或示例,这些可能会引导我达到预期的结果。
您可以使用CSS动画和+
CSS选择器来匹配同级<p>
。
这是一个例子:
function imgHover(obj, event) {
let span = obj.querySelector('span');
span.style.left = event.offsetX + 'px';
span.style.top = event.offsetY + 'px';
}
.img-desc {
position: relative;
display: inline-block;
}
.img-desc span {
opacity: 0;
margin: 0 10px;
transition: opacity 0.4s;
position: absolute;
pointer-events:none;
white-space: nowrap;
background-color: #000;
border-radius: 3px;
padding: 2px 4px;
color: #FFF;
font-family: sans-serif;
font-size: 12px;
}
.img-desc:hover > span {
opacity: 1;
}
<div class="img-desc" onmousemove="imgHover(this, event)">
<img width="240" src="https://picsum.photos/id/237/536/354" />
<span>Image description</span>
</div>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句