将鼠标悬停在图像上时，如何使信息文本出现并遵循 cursor？

Question

对于我的投资组合网站，我想包含在将鼠标悬停在相应图像上时变得可见的信息文本，并且我希望文本跟随 cursor。

我绝不是编码专家，所以我试图通过 css 和光标属性将默认的 cursor 替换为白色背景上的文本图像来达到效果。 然而，这给我留下了图像原本没有的奇怪的灰色边缘。

所以我认为这是一种草率的方法，我宁愿尝试通过 javascript 解决它......这给我留下了以下代码：

 $(document).bind('mousemove', function(e){ $('#tail').css({ left: e.clientX + 20, top: e.clientY + document.body.scrollTop }); });

 #tail { position: absolute; background-color: #ffffff; padding: 5px; opacity: 0; } #tail p { margin: 0px; }.project-01:hover > #tail { opacity: 100%; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="project-01"> <a href="project-site-01.html"> <img src="images/project-cover-01.png" alt="Project description"> </a> <div id="tail"> <p>Project description</p> </div> </div>

我现在留下了将鼠标悬停在图像上时出现的文本，并且它正确地跟随 cursor position 由于滚动而发生变化（这是为什么我没有正确添加文档） .scrollTop'）。 唯一的问题：信息文本远离 cursor。 我尝试调整偏移量，在“document.body.scrollTop”之后添加“- 900”，但这只会使它在我的特定浏览器高度下看起来正确——如果我切换到更小或更大的屏幕，“- 900”当然不会不适合了。

有没有人可以解释我在虚拟层面上做错了什么甚至更好——告诉我如何解决这个问题？ 在过去的两天里，我一直在努力让 hover 文本效果正常工作。 帮助！

PS：可以在https://playgroundparis.com上看到我要创建的效果

Answer 1

我希望这可以帮助你！

编辑：从技术上讲，这是一个重复的 . 我意识到你所说的滚动问题。 我在这篇文章中找到了一个解决方案，并针对您的具体情况对其进行了重新调整。

 var mouseX = 0, mouseY = 0, limitX, limitY, containerWidth; window.onload = function(e) { var containerObjStyle = window.getComputedStyle(document.querySelectorAll(".project-01")[0]); containerWidth = parseFloat(containerObjStyle.width).toFixed(0); containerHeight = parseFloat(containerObjStyle.height).toFixed(0); var follower = document.querySelector('#tail'); var xp = 0, yp = 0; limitX = containerWidth; limitY = containerHeight; var loop = setInterval(function(){ //Change the value 5 in both axis to set the distance between cursor and text. xp = (mouseX == limitX)? limitX: mouseX + 5; xp = (xp < 0)? 0: xp; yp = (mouseY == limitY)? limitY: mouseY + 5; yp = (yp < 0)? 0: yp; follower.style.left = xp + 'px'; follower.style.top = yp + 'px'; }, 15); window.onresize = function(e) { limitX = parseFloat(window.getComputedStyle(document.querySelectorAll(".project-01")[0]).width).toFixed(0); } document.onmousemove = function(e) { mouseX = Math.min(e.pageX, limitX); mouseY = Math.min(e.pageY, limitY); } }; //Change the 100 value to set the fade time (ms). $(".project-01").hover(function () { $(this).find('#tail').fadeIn(100); }, function () { $(this).find('#tail').fadeOut(100); });

 #tail { position: absolute; background-color: #ffffff; padding: 5px; overflow: hidden; } #debug { position: absolute; right: 0; top: 100px; width: 100px; height:100px; background-color: red; color: black; } #tail p { margin: 0px; }.project-01 { width: 300px; overflow: hidden; }.project-01 img { height: 100%; width: 100%; }.project-01 a { height: 100%; width: 100%; display: block; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="project-01"> <a href="project-site-01.html"> <img src="https://picsum.photos/200/300" alt="Project description"> </a> <div id="tail"> <p>Project descriptions</p> </div> </div>

Answer 2

您可以使用以下代码

 .description { display: none; position: absolute; z-index: 2000;important: color; black: padding; 15px: margin-left; 32px: margin-top; -200px: top; auto: height; auto: width; 500px. }:image { height; 200px: width; 200px. }:my-image.hover +:description { display; block: position; absolute: background-color; black: color; white. }:description:hover { display; block: background-color; black: color; white; }

 <div class="project-01"> <a href="project-site-01.html" class="my-image"> <img src="https://homepages.cae.wisc.edu/~ece533/images/monarch.png" alt="Project description" class="image"> </a> <div id="tail" class="description"> Butterflies are insects in the macrolepidopteran clade Rhopalocera from the order Lepidoptera, which also includes moths. Adult butterflies have large, often brightly coloured wings, and conspicuous, fluttering flight. </div> </div>

Answer 3

我希望这有助于我最近几天前为我的网站制作了一个
没有信息 cursor：

 .info:hover.tooltip { color: red; visibility: visible; opacity: 1; transition: opacity 1s }.tooltip { visibility: hidden; opacity: 0; transition: opacity 1s } }.tootip:hover { visibility: visible }

 <span class="info"><img src="https://google.com/favicon.ico">Hover Me</img> <span class="tooltip">Welcome</span></a></span>

使用信息 cursor：

 .info:hover.tooltip { color: red; visibility: visible; opacity: 1; transition: opacity 1s }.tooltip { visibility: hidden; opacity: 0; transition: opacity 1s } }.tootip:hover { visibility: visible }.info { cursor: help }

 <span class="info"><img src="https://google.com/favicon.ico">Hover Me</img> <span class="tooltip">Welcome</span></a></span>