当悬停在图像上时，如何使信息文本出现并跟随光标？

提问者：小点点

当悬停在图像上时，如何使信息文本出现并跟随光标？

对于我的投资组合网站，我想要包括信息文本，当悬停在相应的图像上时变得可见，我想要文本沿着光标跟随。

我绝不是一个编码专家，所以我试图通过css和cursor-property将默认光标替换为白色背景上的文本图像来达到这个效果。然而，这给我留下了怪异的灰色边缘的图像周围的图像本来没有。

所以我觉得这是一个草率的方法，我应该尝试通过JavaScript来解决它。。。这给我留下了以下代码:

null

    $(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>

null

我现在留下的文本是当悬停在图像上时出现的，并且它正确地跟随光标，即使光标位置由于滚动而改变（它最初没有正确地执行，这就是为什么我添加了'document.body.scrolltop')。唯一的问题是:信息文本是远离光标的方式。我试着调整偏移量，在“document.body.scrolltop”后面加上“-900”，但这只能使它与我特定的浏览器高度相匹配--如果我切换到更小或更大的屏幕，“-900”当然不再适合了。

有没有人可以解释我做错了什么，甚至更好--告诉我如何解决这个问题？在过去的两天里，我一直在尝试让悬停文本效果发挥作用。救命啊！

PS:你可以在https://playgroundparis.com上看到我想要创建的效果

共2个答案

匿名用户

希望这能帮到你！

null

$(".project-01").hover(function(){
$(document).bind('mousemove', function(e){
        $('#tail').css({
            left: e.clientX + 10,
            top: e.clientY + document.body.scrollTop
        });
    });
});    

//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;
}

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

匿名用户

您可以使用下面代码的

null

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