Как сделать hover эффект который движется за курсором в определенном контейнере?

Question

Пример: Полоска движется за курсором в определенном блоке. Самое главное, чтобы полоска не выходила за блок и вертикально не двигалась за мышкой.

.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://i.stack.imgur.com/6RCw6.jpg"></div>
  <div class="jp-seek-bar1" style="width: 100%;">
    <div class="jp-play-bar1" style="width: 33%;">
    </div>
  </div>
</div>

Answer 1

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>

БЛОГ НА HUSL

Как сделать hover эффект который движется за курсором в определенном контейнере?

Ответы (1 шт):