Блог

Главная - Вопросы по программированию - Всплывающее изображение и следует за мышью при наведении курсора мыши на текст -> проблема при прокрутке вниз

Всплывающее изображение и следует за мышью при наведении курсора мыши на текст -> проблема при прокрутке вниз

#javascript #html #jquery #css #tooltip

#javascript #HTML #jquery #css #всплывающая подсказка

Вопрос:

Я работаю над изображением (в данном случае красным квадратом), которое появляется и следует за мышью при наведении курсора на определенный текст.

Проблема в том, что, хотя вначале он работает идеально, как только я прокручиваю изображение вниз, изменяется расстояние с помощью мыши, что в конечном итоге приводит к потере. Кажется, я делаю что-то не так, но я этого не вижу.

Здесь я прилагаю код:

   $('.imagetooltip').mousemove(function (e) {
  $('span', this).css({left: e.pageX   0, top: e.pageY   0});
});  
 .imagetooltip span {
  position: fixed;
  opacity: 0;
  transition: opacity .5s ease-in-out;
}

.imagetooltip:hover span {
  opacity: 1;
} 
 <ul id="listcontainer">
      <li class="imagetooltip">
        <p>HERE A SHORT TEXT</p><span><div class="home-img" style="height: 300px; width: 600px; background: red"></span>
      </li>
      <li class="imagetooltip">
        <p>HERE A SHORT TEXT</p><span><div class="home-img" style="height: 300px; width: 600px; background: red"></span>
      </li>
      <li class="imagetooltip">
        <p>HERE A SHORT TEXT</p><span><div class="home-img" style="height: 300px; width: 600px; background: red"></span>
      </li>
      <li class="imagetooltip">
        <p>HERE A SHORT TEXT</p><span><div class="home-img" style="height: 300px; width: 600px; background: red"></span>
      </li>
      <li class="imagetooltip">
        <p>HERE A SHORT TEXT</p><span><div class="home-img" style="height: 300px; width: 600px; background: red"></span>
      </li>
      <li class="imagetooltip">
        <p>HERE A SHORT TEXT</p><span><div class="home-img" style="height: 300px; width: 600px; background: red"></span>
      </li>
      <li class="imagetooltip">
        <p>HERE A SHORT TEXT</p><span><div class="home-img" style="height: 300px; width: 600px; background: red"></span>
      </li>
      <li class="imagetooltip">
        <p>HERE A SHORT TEXT</p><span><div class="home-img" style="height: 300px; width: 600px; background: red"></span>
      </li>
      <li class="imagetooltip">
        <p>HERE A SHORT TEXT</p><span><div class="home-img" style="height: 300px; width: 600px; background: red"></span>
      </li>
      <li class="imagetooltip">
        <p>HERE A SHORT TEXT</p><span><div class="home-img" style="height: 300px; width: 600px; background: red"></span>
      </li>
      <li class="imagetooltip">
        <p>HERE A SHORT TEXT</p><span><div class="home-img" style="height: 300px; width: 600px; background: red"></span>
      </li>
      <li class="imagetooltip">
        <p>HERE A SHORT TEXT</p><span><div class="home-img" style="height: 300px; width: 600px; background: red"></span>
      </li>
      <li class="imagetooltip">
        <p>HERE A SHORT TEXT</p><span><div class="home-img" style="height: 300px; width: 600px; background: red"></span>
      </li>
      <li class="imagetooltip">
        <p>HERE A SHORT TEXT</p><span><div class="home-img" style="height: 300px; width: 600px; background: red"></span>
      </li>
      <li class="imagetooltip">
        <p>HERE A SHORT TEXT</p><span><div class="home-img" style="height: 300px; width: 600px; background: red"></span>
      </li>
      <li class="imagetooltip">
        <p>HERE A SHORT TEXT</p><span><div class="home-img" style="height: 300px; width: 600px; background: red"></span>
      </li>
      <li class="imagetooltip">
        <p>HERE A SHORT TEXT</p><span><div class="home-img" style="height: 300px; width: 600px; background: red"></span>
      </li>
      <li class="imagetooltip">
        <p>HERE A SHORT TEXT</p><span><div class="home-img" style="height: 300px; width: 600px; background: red"></span>
      </li>
      <li class="imagetooltip">
        <p>HERE A SHORT TEXT</p><span><div class="home-img" style="height: 300px; width: 600px; background: red"></span>
      </li>
      <li class="imagetooltip">
        <p>HERE A SHORT TEXT</p><span><div class="home-img" style="height: 300px; width: 600px; background: red"></span>
      </li>
    </ul>

Я буду признателен за любые предложения / улучшения в коде 🙂

Заранее большое спасибо и приветствия!

* Примечание: фрагмент кода не может перемещать красный квадрат и следовать за мышью, но когда я запускаю код локально, я не получаю никаких проблем с jQuery: S

Ответ №1:

Во-первых, span это встроенный элемент и div элемент блока. Таким образом, наличие div inside span не является хорошей практикой, кроме того, было бы лучше, если бы вы вложили span inside span и дали inner span display:block или display: inline-block property .

во-вторых, измените position: fixed на position:absolute. 

 .imagetooltip span {
      position: absolute;
      opacity: 0;
      transition: opacity .5s ease-in-out;
 }