Css Hover div not working as expected

Question

I want to show a hover card on mouse move over a div class. So I have done the following class in 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;
}

And in the body I have just added the following code..

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

and following is the div on which I want to show the hover card

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

And following is the 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'});


            });
});

Everything works fine. But when I scroll down the hover card just get at more distant from mouse pointer. The same code ran well in other places. but why it is not working in this case . ANy idea?

Answer 1

maybe you can use :

position: fixed;

in your #descriptionBox2 declaration