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

Question

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

Я ни в коем случае не эксперт по кодированию, поэтому я попытался добиться эффекта, заменив курсор по умолчанию изображением текста на белом фоне через css и свойство курсора. Однако это оставило у меня странную серую окантовку вокруг изображения, которой изначально не было.

Итак, я решил, что в любом случае это был небрежный подход, и мне лучше попробовать решить его с помощью javascript. .. что оставило мне следующий код:

    $(document).bind('mousemove', function(e){
        $('#tail').css({
            left: e.clientX + 20,
            top: e.clientY + document.body.scrollTop
        });
    });

#tail {
position: absolute;
background-color: #ffffff;
padding: 5px;
opacity: 0;
}

#tail p {
    margin: 0px;
}


.project-01:hover > #tail {
    opacity: 100%; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="project-01">
    <a href="project-site-01.html">
        <img src="images/project-cover-01.png" alt="Project description">
    </a>
    <div id="tail">
        <p>Project description</p>
    </div>
</div>

Теперь у меня остается текст, который появляется при наведении курсора на изображение и правильно следует за курсором, даже если положение курсора изменяется из-за прокрутки (что поначалу не выполнялось должным образом, поэтому я добавил «document.body.scrollTop»). Единственная проблема: информационный текст находится далеко от курсора. Я попытался отрегулировать смещение, добавив '- 900' после 'document.body.scrollTop', но это только заставило его выглядеть правильно с моей указанной c высотой браузера - если я переключаюсь на меньший или больший экран, '- 900' конечно, больше не подходит.

Есть ли кто-нибудь, кто может объяснить, что я делаю не так, на фиктивном уровне или даже лучше - подскажите, как решить проблему? Я пытался заставить работать этот текстовый эффект при наведении курсора буквально последние два дня. ПОМОЩЬ!

PS: Вы можете увидеть эффект, который я хочу создать на https://playgroundparis.com

Answer 1

Надеюсь, это вам поможет!

Изменить: Технически это дублированный . Я понял проблему с прокруткой, о которой вы говорите. Я нашел решение в этом сообщении , и я повторно адаптировал его для вашего конкретного случая c.

var mouseX = 0, mouseY = 0, limitX, limitY, containerWidth;

window.onload = function(e) {
  var containerObjStyle = window.getComputedStyle(document.querySelectorAll(".project-01")[0]);
  containerWidth =  parseFloat(containerObjStyle.width).toFixed(0);
  containerHeight = parseFloat(containerObjStyle.height).toFixed(0);
  var follower = document.querySelector('#tail');
  var xp = 0, yp = 0;
  limitX = containerWidth;
  limitY = containerHeight;
  var loop = setInterval(function(){
    //Change the value 5 in both axis to set the distance between cursor and text.
    xp = (mouseX == limitX) ? limitX : mouseX + 5;
    xp = (xp < 0) ? 0 : xp;
    yp = (mouseY == limitY) ? limitY : mouseY + 5;
    yp = (yp < 0) ? 0 : yp;
    follower.style.left = xp + 'px';
    follower.style.top = yp + 'px';
  }, 15);
  window.onresize = function(e) {
    limitX = parseFloat(window.getComputedStyle(document.querySelectorAll(".project-01")[0]).width).toFixed(0);
  }
  document.onmousemove = function(e) {
    mouseX = Math.min(e.pageX, limitX);
    mouseY = Math.min(e.pageY, limitY);
  }
};

//Change the 100 value to set the fade time (ms).
$(".project-01").hover(function () {
    $(this).find('#tail').fadeIn(100);
},
function () {
    $(this).find('#tail').fadeOut(100);
});

#tail {
position: absolute;
background-color: #ffffff;
padding: 5px;
overflow: hidden;

}
  #debug {
    position: absolute;
    right: 0;
    top: 100px;
    width: 100px;
    height:100px;
    background-color: red;
    color: black;
  }

#tail p {
    margin: 0px;
}

.project-01 {
  width: 300px;
  overflow: hidden;
}

.project-01 img {
  height: 100%;
  width: 100%;
}

.project-01 a {
  height: 100%;
  width: 100%;
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="project-01">
    <a href="project-site-01.html">
        <img src="https://picsum.photos/200/300" alt="Project description">
    </a>
    <div id="tail">
        <p>Project descriptions</p>
    </div>
</div>

Answer 2

Надеюсь, это поможет, я недавно сделал один myselff для своего веб-сайта несколько дней назад
Нет информационного курсора:

.info:hover .tooltip {
  color: red;
  visibility: visible;
  opacity: 1;
  transition: opacity 1s
}
.tooltip {
  visibility: hidden;
  opacity: 0;
  transition: opacity 1s
}
}
.tootip:hover {
  visibility: visible
}

<span class="info"><img src="https://google.com/favicon.ico">Hover Me</img> <span class="tooltip">Welcome</span></a></span>

С информационным курсором:

    .info:hover .tooltip {
      color: red;
      visibility: visible;
      opacity: 1;
      transition: opacity 1s
    }
    .tooltip {
      visibility: hidden;
      opacity: 0;
      transition: opacity 1s
    }
    }
    .tootip:hover {
      visibility: visible
    }

.info {
  cursor:  help
}

<span class="info"><img src="https://google.com/favicon.ico">Hover Me</img> <span class="tooltip">Welcome</span></a></span>

Answer 3

Вы можете использовать приведенный ниже код

.description {
  display: none;
  position: absolute;
  z-index: 2000 !important;
  color: black;
  padding: 15px;
  margin-left: 32px;
  margin-top: -200px;
      top: auto;

  height: auto;
        width: 500px;
}

.image {
  height: 200px;
  width: 200px;
}

.my-image:hover + .description {
  display: block;
  position: absolute;
      background-color: black;
    color: white;
}

.description:hover {
  display: block;
  background-color: black;
    color: white;

}

<div class="project-01">
 <a href="project-site-01.html" class="my-image">
        <img src="https://homepages.cae.wisc.edu/~ece533/images/monarch.png" alt="Project description" class="image">
        </a>
    <div id="tail" class="description">
        Butterflies are insects in the macrolepidopteran clade Rhopalocera from the order Lepidoptera, which also includes moths. Adult butterflies have large, often brightly coloured wings, and conspicuous, fluttering flight. 
    </div>
</div>