鼠标悬停时变成文字

Question

希望你很好。

这是我的问题，我正在尝试制作一种效果，当用户将鼠标悬停在图像上时，鼠标会变成文本。目前我找到的唯一解决方案是为每个图像创建一个自定义鼠标，并让每个 class/img 都有自己的 mouse/text。这不是很好，因为它不适合响应式，而且它在代码方面也不是很好。你有什么想法吗？

这是一个使用这种效果的网站： Waka Waka by Mouthwash

再见，提前致谢，里奥

Answer 1

您必须首先在 HTML 中创建一个 div 来放置悬停时将出现的图像和文本。在 CSS 上，确保文本具有绝对定位。然后使用JavaScript将带有文字的div附加到光标位置。

function createTextCursor(event){
  let el = document.getElementById("hoveringText");
    el.style.top = event.clientY + "px";
    el.style.left = event.clientX + "px";
}

document.getElementById("main").addEventListener('mousemove', createTextCursor);

#main:hover > #hoveringText {
  display : block;
}

#hoveringText {
  position: absolute;
  font-style: italic;
  font-size: 24px;
  font-weight: bold;
  color: blue;
  display: none;
}

#main{
  width: 300px;
  height: 300px;
  cursor: none;
}

<div id="main" onmousemove="createTextCursor(event)">
  <img alt="" src="https://via.placeholder.com/300" />
  <div id="hoveringText">text cursor</div>
</div>

鼠标悬停时变成文字

Mouse become text on hover

html

javascript

css

mouse

hover