将鼠标悬停在文本上并显示图像[关闭]

Question

嗨，我尝试实现像这里 https://ludmillamaury.com/ 这样的动画。当您将鼠标悬停在“选定作品”部分上时，会显示一个图像。我试图查看他们使用的东西，但没有找到。我认为这是一个 js 库，但我没有找到哪个。他有同样的效果：https://olivierguillard.dev/

我从几个小时就开始寻找，但我什至不知道我应该寻找什么关键字。也许有人可以帮助我！

Answer 1

所以看起来他们有<a> 标签，当你将鼠标悬停在他们上面时会做出反应。这可以使用 JavaScript 或 CSS 来完成，但您需要使用什么取决于您想要的反应。

如果您想让图像像在那些网站上那样显示在光标周围，您必须使用事件侦听器或像其他人所说的那样使用光标。话虽如此，显示的网站没有使用光标，因为我仍然可以在那里看到我的正常指针光标。

这是我使用 JavaScript 和一些 CSS 实现的方法（图像显示并随着光标移动，当您停止将鼠标悬停在链接上时消失）。

HTML：

<div id="container">
  <a href="" data-src="road.png" class="hover">
    <h1>Hover here!</h1>
  </a>
</div>

确保您的href 是您希望人们在点击它时转到的链接。如果您不想要链接（我假设您这样做是因为您展示的两个网站都有），只需将其更改为 <div> 或其他内容。 这里的data-src 属性非常重要，因为它告诉JavaScript 使用什么图片。还有其他方法可以做到这一点，但我个人最喜欢在 HTML 和 JavaScript 之间共享特定于元素的小信息位的数据集。你怎么称呼它并不重要，只要它以“data-”开头（例如data-image或data-href）。

CSS：

#container {
  position: relative;
}
.followMouse {
  z-index: -1;
  position: absolute;
}

followMouse 将成为我们在图像显示时添加到图像的类。我给它一个-1 的z-index，所以它显示在页面上其他元素的后面（就像你的例子一样）。我也做了它的立场absolute。这非常重要。这就是允许我们设置它的坐标的原因，也是阻止它弄乱页面上其他样式的原因。为了确保它有效，将其父元素（在本例中为 id 为“container”的元素）设置为relative 位置总是一个好主意。

现在是有趣的部分！以下是使其工作的 JavaScript 事件侦听器：

for (let el of document.querySelectorAll('.hover')) {
  let image = new Image();
  image.src = el.dataset.src;
  image.className = "followMouse";
  el.addEventListener('mouseover',(e)=>{
    document.getElementById('container').append(image);
    image.style.left = `${e.x - (image.width/2)}px`;
    image.style.top = `${e.y - (image.height/2)}px`;
  })
  el.addEventListener('mouseout',(e)=>{
    image.remove();
  })
}
window.addEventListener('mousemove',(e)=> {
  let image = document.querySelector('.followMouse');
  if (image) {
    image.style.left = `${e.x - (image.width/2)}px`;
    image.style.top = `${e.y - (image.height/2)}px`;
  }
})

我使用document.querySelectorAll 来获取所有以“悬停”为类的元素，以防您想对多个元素执行此操作。 为了获得data-src 属性，我调用了元素的dataset。基本上，做el.dataset.，然后是破折号之后的任何东西（但如果它在你的HTML中有破折号，现在使用camelCase）。 然后我加载了一个图像，该属性作为其源，followMouse 作为其类（在 JavaScript 中必须将其称为 className，因为 class 已经是一个东西）。我还没有将它附加到文档中，因为它会在用户将鼠标悬停在标签上之前显示出来。 对于每个具有“悬停”类的元素，我添加了两个事件侦听器：一个在鼠标悬停在元素上时将图像添加到容器中，另一个在鼠标移开时删除图像。在前者中，我还更改了图像的style 属性，使其坐标是鼠标左侧宽度的一半和鼠标上方高度的一半——基本上，它会显示在鼠标的中心它。 因为我必须从元素的 CSS 样式中调用它的“左”和“上”CSS 属性，所以我必须传入一个字符串，其中包含我发送的数字类型。例如，在 CSS 中应该是这样的：

el {
  left: 10px
}

所以我需要向 CSS 发送一个像“10px”这样的字符串。为此，我使用 `` 而不是普通的双引号或单引号，这样我就可以定义一个包含变量或 JavaScript 的字符串（${insert js here}）。

最后，我在整个窗口中添加了一个事件监听器来监听鼠标的移动。这次我只调用了querySelector 而不是querySelectorAll，因为该类一次应该只有一个元素。这个事件监听器所做的就是检查图像是否存在（也就是如果你将鼠标悬停在执行此操作的元素上），如果存在，则更新图像的位置，使光标仍然在它的中心。

Answer 2

<div class="portfolio">
          <a class="thecococlub" href="project/the-coco-club.html">  <div class="folio" >
                <p>001</p>
                <hr>
                <h3>THE COCO CLUB</h3>
            </div></a>
            <div class="folio" >
                <p>002</p>
                <hr>
                <h3>Tanja Kuriger Fotografie</h3>
            </div>
            <div class="folio">
                <p>003</p>
                <hr>
                <h3>Metall Schmiededesign</h3>
            </div>
            <div class="folio">
                <p>004</p>
                <hr>
                <h3>Creative & Code</h3>
            </div>

            <a href="project/maeva.html">
            <div class="folio">
                <p>005</p>
                <hr>
                <h3>Maeva</h3>
            </div></a>
            <div class="folio">
                <p>006</p>
                <hr>
                <h3>Mint Fashion</h3>
            </div>
        </div>

css 是：

.thecococlub::before{
  content: " ";
}

.thecococlub::after{
  content: " ";
  background-image: url("../img/thecococlub_500px.png");
  width: 500px;
}

Answer 3

最简单的方法是使用图像作为鼠标光标。您可以使用SVG、PNG 或GIF（虽然不是动画）。要在悬停时更改光标，您可以使用 :hover 伪选择器。

然而，鼠标光标图像将从“目标”开始显示在右下角。您可以使用像素偏移来“居中”光标图像。

a:hover {
  cursor: url("https://via.placeholder.com/100.png") 50 50, auto;
}


/* for styling purpose only */
body {
  margin: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

<a href="#">Hover me!</a>