將鼠標懸停在圖像上時，如何使信息文本出現並遵循 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>