Question

我想在鼠标移动到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'});


            });
});

一切正常。但是当我向下滚动悬停卡时，只需离开鼠标指针即可。相同的代码在其他地方运行良好。但为什么它不适用于这种情况。任何想法？

Answer 1

也许你可以使用：

position: fixed;

在您的#descriptionBox2声明中

Css Hover div没有按预期工作

1 个答案: