Блог

Главная - Вопросы по программированию - Эффект наведения курсора мыши с текстовым описанием

Эффект наведения курсора мыши с текстовым описанием

#javascript #html #css #preloader

#javascript #HTML #css #предварительный загрузчик

Вопрос:

Я настраиваю свой первый веб-сайт и хочу добавить одну функциональность. Я имею в виду эффект onmouse, когда мышь находится над изображением — он отображает детали изображения, но не как эффект наведения курсора на изображение, а как новый блок рядом с мышью.

Этот веб-сайт разработан с использованием Django в качестве серверной части и начальной загрузки с использованием javascript в интерфейсной части. Я уже искал какое-либо решение, но не смог найти ничего полезного.

Я особенно ищу некоторые подсказки или некоторые примеры, которые могли бы привести меня к ожидаемым результатам.

Ответ №1:

Вы можете использовать CSS-анимацию и css-селектор, чтобы соответствовать <p> аналогу.
Вот пример:

 function imgHover(obj, event) {
  let span = obj.querySelector('span');
  span.style.left = event.offsetX   'px';
  span.style.top = event.offsetY   'px';
}  
 .img-desc {
  position: relative;
  display: inline-block;
}

.img-desc span {
  opacity: 0;
  margin: 0 10px;
  transition: opacity 0.4s;
  position: absolute;
  pointer-events:none;
  white-space: nowrap;
  
  background-color: #000;
  border-radius: 3px;
  padding: 2px 4px;
  color: #FFF;
  font-family: sans-serif;
  font-size: 12px;
}

.img-desc:hover > span {
  opacity: 1;
}  
 <div class="img-desc" onmousemove="imgHover(this, event)">
  <img width="240" src="https://picsum.photos/id/237/536/354" />
  <span>Image description</span>
</div>

Комментарии:

1. Выглядит великолепно, и я постараюсь использовать это для своих нужд, но на самом деле это не то, о чем я думал, описывая вопрос. Я думал об этом <p>Image description</p> как о содержимом, которое отображается рядом с мышью, когда оно находится над изображением, вы думаете, это тоже возможно с этим?

2. @mmalak вы хотите, чтобы текст следовал за курсором мыши? во время движения мыши?

3. Да, это действительно то, что я искал

4. @mmalak Я только что исправил ответ, чтобы сделать то, что вы ожидали. Теперь для обработки перемещения мыши требуется некоторый JS.

5. Спасибо, это на самом деле то, что я искал. Последний вопрос — можно ли сделать то же самое без JS? 🙂