如何使图像跟随鼠标光标答案

【问题标题】：How to make image follow mouse cursor如何使图像跟随鼠标光标
【发布时间】：2022-07-12 01:28:07
【问题描述】：

我已经在图像跟随鼠标光标的地方设置了这个代码。但是，由于某种原因，它无法在第二个容器上正常工作。

https://codepen.io/stefanomonteiro/pen/jOarjgX

PS：无关紧要：Stackoerflow 首先强迫我 pste 代码，而不仅仅是 codepen 链接。现在它说它主要是文本。这些公司应该减少对机器人的依赖。有时候会很烦人:)

const items = document.querySelectorAll('.container')

items.forEach((el) => {
  const image = el.querySelector('img')
  
  el.addEventListener('mouseenter', (e) => {
    gsap.to(image, { autoAlpha: 1 })
  })
  
   el.addEventListener('mouseleave', (e) => {
    gsap.to(image, { autoAlpha: 0 })
  })
  
  el.addEventListener('mousemove', (e) => {
    gsap.set(image, { x: e.pageX, y: e.pageY })
  })
})

.container {
  display:inline-block;
  background:#ff0000;
  width:100%;
  height:200px;
}
.container:nth-child(2){
  background: #00ff00;
}

.container img.swipeimage {
  position: absolute;
  width: 200px;
  height: 200px;
  object-fit: cover;
  transform: translateX(-50%) translateY(-50%);
  z-index: 9;
  opacity: 0;
  visibily: hidden;
  pointer-events: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
<div class="container">
  <img class="swipeimage" src="https://source.unsplash.com/random">
  
  <div class="text">
    <h1>One</h1>
  </div>
  
</div>
<div class="container">
  <img class="swipeimage" src="https://source.unsplash.com/random">
  
  <div class="text">
    <h1>Two</h1>
  </div>
  
</div>

【问题讨论】：

标签： javascript gsap

【解决方案1】：

你需要在你的CSS中将.container img.swipeimage设置为top: 0;，否则它会继承一半的高度（height + transform: translateY(-50%)）

const items = document.querySelectorAll('.container')

items.forEach((el) => {
  const image = el.querySelector('img')
  
  el.addEventListener('mouseenter', (e) => {
    gsap.to(image, { autoAlpha: 1 })
  })
  
   el.addEventListener('mouseleave', (e) => {
    gsap.to(image, { autoAlpha: 0 })
  })
  
  el.addEventListener('mousemove', (e) => {
    gsap.set(image, { x: e.pageX, y: e.pageY })
  })
})

.container {
  display:inline-block;
  background:#ff0000;
  width:100%;
  height:200px;
}
.container:nth-child(2){
  background: #00ff00;
}

.container img.swipeimage {
  position: absolute;
  width: 200px;
  top: 0;
  height: 200px;
  object-fit: cover;
  transform: translateX(-50%) translateY(-50%);
  z-index: 9;
  opacity: 0;
  visibily: hidden;
  pointer-events: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
<div class="container">
  <img class="swipeimage" src="https://source.unsplash.com/random">
  
  <div class="text">
    <h1>One</h1>
  </div>
  
</div>
<div class="container">
  <img class="swipeimage" src="https://source.unsplash.com/random">
  
  <div class="text">
    <h1>Two</h1>
  </div>
  
</div>

【讨论】：

嗯，效果很好。不过，我仍然很困惑为什么它在第一个容器上起作用。
position: absolute 需要 top 和 left 属性，否则他只是猜测它的位置。虽然我不确定gsap 是如何工作的，但我只能想象它堆叠等待显示的图像，对于该堆栈，没有相对/绝对的顶部道具关系，将两个图像放在一起（如显示：块）而不是将它们堆放在同一个原点，你最终会得到第一个图像在顶部 0，第二个在顶部 50%，而不是同时堆放在顶部：0 然后用变换移动它的原点

【解决方案2】：

您知道先生如何使图像上方的文字出现在悬停上吗？我尝试在 CSS 中使用 z-index 但没有奏效，我明确将 z-index 设置为高，99 为纯文本但没有奏效。

【讨论】：