是否可以通过div看到光标周围的下面的div？

Question

嗨，这是一个有点奇怪的问题，我已经看到了与我想要的类似的效果，但不完全相同，不确定我想做的是否可能。我想要两个 div 堆叠在一起，下面的 div 内容仅在特定区域（光标周围）显示，有没有办法使 div 仅部分透明？或者还有其他方法可以达到这个效果吗？

Answer 1

您可以将想要在背景中显示的元素放在前面，并通过Clip-path仅显示其一部分；

对于坐标，我使用CSS 变量，但您也可以直接覆盖样式。

// Get element from the DOM
const container = document.querySelector('.container');

// Apply event listener
container.addEventListener('mousemove', updateCoords, false);

function updateCoords(event) {
  // Get X and Y coordinates
  const { offsetX, offsetY } = event;
  
  // Update coordinates
  container.style.setProperty('--x', offsetX + 'px');
  container.style.setProperty('--y', offsetY + 'px');
}

.container {
  border: 1px solid #000;
  width: 300px;
  height: 300px;
}

/* Show child when hovering the container */
.container:hover .child {
  display: block;
}

.child {
  clip-path: ellipse(30px 30px at var(--x) var(--y));
  display: none;
}

<div class="container">
  <img class="child" src="//picsum.photos/300" width="300" height="300" />
</div>

可以使用requestAnimationFrame让圆圈移动更流畅

// Get element from the DOM
const container = document.querySelector('.container');

// Apply event listener
container.addEventListener('mousemove', updateCoords, false);

function updateCoords(event) {
  // Get X and Y coordinates
  const { offsetX, offsetY } = event;
  
  // Update coordinates
  requestAnimationFrame(() => {
    container.style.setProperty('--x', offsetX + 'px');
    container.style.setProperty('--y', offsetY + 'px');
  });
}

.container {
  border: 1px solid #000;
  width: 300px;
  height: 300px;
}

/* Show child when hovering the container */
.container:hover .child {
  display: block;
}

.child {
  clip-path: ellipse(30px 30px at var(--x) var(--y));
  display: none;
}

<div class="container">
  <img class="child" src="//picsum.photos/300" width="300" height="300" />
</div>

带文字的示例

// Get element from the DOM
const container = document.querySelector('.container');

// Apply event listener
container.addEventListener('mousemove', updateCoords, false);

function updateCoords(event) {
  // Get X and Y coordinates
  const {offsetX, offsetY} = event;

  // Update coordinates
  requestAnimationFrame(() => {
    container.style.setProperty('--x', offsetX + 'px');
    container.style.setProperty('--y', offsetY + 'px');
  });
}

.container {
  min-height: 100vh;
  min-width: 100vh;
  overflow: hidden;
}

.container:hover .code {
  display: flex;
}

.display,
.code {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
  background-color: rgb(49, 49, 49);
  color: rgb(240, 191, 29);
  pointer-events: none;
}

.code {
  clip-path: ellipse(100px 100px at var(--x) var(--y));
  display: none;
  background-color: rgb(3, 3, 3);
  color: rgb(101, 253, 101);
}

<div class="container">
  <div class="display">
    <h1>Header</h1>
  </div>
  <div class="code">
    <h3>&lt;h1&gt;Header&lt;/h1&gt;</h3>
  </div>
</div>