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

Рейтинг: 0Ответов: 1Опубликовано: 05.06.2023

подскажите как сделать при наведении курсора такую заливку в блоке, если двигать мышку то и эта полоска двигается, если убрать курсор полоска пропадает, если что ссылка вот на ресурс 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>

javascript
Источник: Stack Overflow на русском

Ответы

▲ 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>