Onmouse hover effect with text description

Question

I am setting up my first website, and I want to add one functionality. I mean , when mouse is over an image - it's displaying details of image, but not as a hover effect on the image, but a new block next to the mouse. ，当鼠标悬停在图像上方时-它显示的是图像的详细信息，但不是作为对图像的悬停效果，而是鼠标旁边的新块。

This website is develop using Django as a backend part, and bootstrap with javascript on frontend part. I was already looking for any solution, but I couldn't find anything useful.

I am especially looking for some , or some examples which might lead me into expected results. 或示例，这些可能会引导我达到预期的结果。

Answer 1

You can use CSS Animations, and + css selector to match a sibling <p> .
Here is an example:

 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>