主页 / 问题 / 1254032
Accepted
steep
Asked:2022-03-10 20:05:09 +0800 CST2022-03-10 20:05:09 +0800 CST

如何在特定容器中制作跟随光标的悬停效果？

  • 772

示例：该条在某个块中跟随光标。最重要的是，条带不会超出块并且不会在鼠标后面垂直移动。

gif 光标

.v_p_progs {
  height: 50px;
  overflow: hidden;
  position: relative;
  border: 1px solid #000;
}

.jp-wave {
  position: absolute;
  width: 100%;
  height: 50px;
}

.jp-wave>img {
  height: 50px;
  opacity: 0.4;
  width: 100%;
}

.jp-seek-bar1 {
  position: relative;
  height: 50px;
}

.v_p_progs>div>div {
  background: rgba(0, 0, 0, 0) linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 100%) repeat scroll 0 0;
  height: 50px;
}
<div class="v_p_progs">
  <div class="jp-wave"><img src="https://isstatic.askoverflow.dev/6RCw6.jpg"></div>
  <div class="jp-seek-bar1" style="width: 100%;">
    <div class="jp-play-bar1" style="width: 33%;">
    </div>
  </div>
</div>

javascript

1 个回答

  1. Best Answer

    const container = document.querySelector('.container');
const thumb = container.querySelector('.thumb');

container.addEventListener('mousemove', (event) => {
  const x = Math.min(event.offsetX, container.clientWidth - thumb.clientWidth);
  thumb.style.left = `${x}px`;
});
    .container {
  background-color: #000000;
  height: 100px;
  position: relative;
  width: 500px;
}

.container:not(:hover) .thumb {
  display: none;
}

.thumb {
  background-color: green;
  bottom: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  width: 2px;
}
    <div class="container">
  <div class="thumb"></div>
</div>

    • 3

相关问题