Home/ Questions/Q 3597980
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-18T20:11:07+00:00

// CSS #popupUser{width:180px; height:180px; position:absolute; background:#FFFFFF; border:#000000 2px solid; display:none;} .viewUser{width:173px; float:left; padding:10px; margin-left:20px;

  • 0
// CSS
#popupUser{width:180px; height:180px; position:absolute; background:#FFFFFF; border:#000000 2px solid; display:none;}
.viewUser{width:173px; float:left; padding:10px; margin-left:20px; margin-bottom:20px; border:#000000 1px solid;}    

// HTML + Jquery
<body>  
    <div class="contenitore">   
        <script type="text/javascript">
            $(document).ready(function() {      
                $(".viewUser")
                    .mousemove(function (e) {
                        if($("#popupUser").css('display')=='none') {
                $("#popupUser").css({left:e.pageX+15, top:e.pageY -190}).show();
                            alert("None");
                        }
                    })
                    .mouseout(function () {
                    $("#popupUser").hide();
                });         
            });
        </script>      

        <div class="viewUser">
            Content
        </div>
    </div>  

    <div id="popupUser">&nbsp;</div>
</body>

What i’d like to aspect is that, when i go on the div viewUser with the mouse, the alert is showed (printing none). After this, until I’ll left that div, I must never seen another alert (because the display property, when I call the .show() function, should be setted as block).

But that’s not happens : in fact some time (when I still moving on the viewUser with the mouse) I see the alert. Why this behaviour?

Cheers

UPDATE

In fact what i’d like to do is this : when i go on the mouse in the viewUser div, i’ll do an ajax call to the server to get some info and append it to popupUser. So, i won’t to call this ajax call everytime i move the mouse on the div 🙂

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Because when the popup appears and the mouse is on it, the mouseout of the .viewUser fires and closes it again..

    If you want to track the element then reposition it in relation to the mouse.

            $(document).ready(function() {      
            $(".viewUser")
                .mousemove(function (e) {
                    var $popU = $("#popupUser");
                    if($popU.css('display')=='none') {
                        $popU.show();
                    }
                    $popU.css({left:e.clientX+2, top: e.clientY-2});
                })
                .mouseout(function () {
                $("#popupUser").hide();
            });         
        });

    demo: http://www.jsfiddle.net/gaby/RQhTp/

    The solution (after comments) is to use a timeout for the mouseout so that the div has enough time to re-position itself..

            $(document).ready(function() {      
            $(".viewUser")
                .mouseenter(function(e){
                    $("#popupUser").show().css({left:e.clientX+1, top: e.clientY+1});
                     clearTimeout($(this).data('timeout'));
                })
                .mousemove(function (e) {
                    $("#popupUser").css({left:e.clientX+1, top: e.clientY+1});
                })
                .mouseleave(function() {
                    $(this).data('timeout', setTimeout(function(){
                        $("#popupUser").hide();
                    }, 100));

            });         
        });

    demo: http://www.jsfiddle.net/gaby/RQhTp/3/

    • 0