подскажите как сделать такую полоску в блоке при наведении курсора

Question

подскажите как сделать при наведении курсора такую заливку в блоке, если двигать мышку то и эта полоска двигается, если убрать курсор полоска пропадает, если что ссылка вот на ресурс https://kprverse.com/

.cursor {
  width: 100%;
  height: 100px;
  background: #ccc;
  position: relative;
}
.cursor-line {
    background: #000;
    height: 100%;
    width: 1px;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

<div class="cursor"><div class="cursor-line"></div></div>

Answer 1

Например с помощью JS mousemove.

const cursor = document.querySelector('.cursor');
const cursorLine = document.querySelector('.cursor-line');
cursor.addEventListener('mousemove', (e) => {
  cursorLine.style.left = e.offsetX + 'px';
});

.cursor {
  width: 100%;
  height: 100px;
  background: #ccc;
  position: relative;
  margin: 0;
  padding: 0;
}
.cursor-line {
  background: red;
  width: 1px;
  height: 100%;
  position: absolute;
  display: none;
  pointer-events: none;
}
.cursor:hover .cursor-line {
  display: block;
}

<div class="cursor"><div class="cursor-line"></div></div>

БЛОГ НА HUSL

подскажите как сделать такую полоску в блоке при наведении курсора

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