Javascript Css悬停div未按预期工作

我想在div类上显示鼠标悬停卡。所以我用css完成了下面的课程

#descriptionBox2{
    position: absolute;
    display: none;
    background-color: #EEEEEE;
    padding: 7px;
    font-size: 20px;
    border: 1px solid #EEEEEE;
    box-shadow:2px 2px 5px 2px #DDDDDD;
    width: 250px;
}

在正文中，我刚刚添加了以下代码

<div id="descriptionBox2"></div>

下面是我想显示悬停卡的div

<?php $serial = 1; foreach($readAll as $readOne):?>
        <div class="readone" explanation="<?php echo $readOne['explanation'];?>" memorize="<?php echo $readOne['memorize']; ?>">

            <span style="font-weight:bold;"><?php echo $serial++. '. ';?></span><?php echo $readOne['question_desc']. '<br><br>';?>
            <span style="font-weight:bold;padding-left:30px;">Answer: </span><?php echo $readOne['answer'];?>

        </div>
        <br><br>
    <?php endforeach;?>
</div>

答复:

下面是js

$(document).ready(function(){
            $('.readone').mousemove(function(e){
                     var explanation = "<strong>Explanation : </strong><br><span style='padding-left:20px;'>"+ $(this).attr('explanation') + "</span>";
                     var memorize = "<strong>Memorizing Tips : </strong><br><span style='padding-left:20px;'>"+ $(this).attr('memorize') + "</span>";
                     var msg = explanation + "<br><br>" + memorize;
                     $('#descriptionBox2').html(msg).show();
                     $('#descriptionBox2').css('top', e.clientY+20).css('left', e.clientX+20);
                     $(this).css({'background-color':'#98bf21'});

            }).mouseout(function(){
                     $('#descriptionBox2').hide();
                     $(this).css({'background-color':'#FFFFFF'});


            });
});

$（文档）.ready（函数（）{
$（'.readone'）.mousemove（函数（e）{
var explainion=“解释：
”+$（this.attr（'explainion'）+”；
var memory=“记忆技巧：
”+$（this.attr（'memory'）+”；
var msg=解释+“

”+记忆；
$（'#descriptionBox2'）.html（msg.show（）；
$（'#descriptionBox2'）.css（'top'，e.clientY+20）.css（'left'，e.clientX+20）；
$（this.css（{'background-color'：'#98bf21'}）；
}).mouseout（函数（）{
$（'#descriptionBox2'）.hide（）；
$（this.css（{'background-color'：'#FFFFFF'}）；
});
});

一切正常。但当我向下滚动悬停卡时，只需距离鼠标指针更远。同样的代码在其他地方运行良好。但为什么它在这种情况下不起作用。有什么想法吗？

也许你可以使用：

position: fixed;

---

在您的

#descriptionBox2

声明中，您告诉它使用

e.clientY

定位与鼠标相关的位置。你想让它显示在哪里？对不起，我没有得到提示@cale_bit刚刚工作得很好。但是为什么会发生这种情况呢？在绝对值中，可以相对于其父元素定位元素。因此，如果父元素的top为-20px，并且具有绝对值的子元素设置为top:0px；该元素也将显示在-20px顶部。使用“固定”时，可以将元素放置在视口中的任意位置，而不受其父元素的影响。您可以阅读更多有关定位的信息