All geek questions in one place

JQuery - problem with .css ('display')

// 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 would like to consider is that when I am in the viewUser div with the mouse, a warning appears (no print). After that, until I leave this div, I should never see another warning (because the display property, when I call the .show () function, should be set as a block).

But this does not happen: actually for a while (when I am still moving around viewUser with the mouse), I see a warning. Why is this behavior?

Greetings

UPDATE

, , : div viewUser, ajax- , popupUser. , ajax , div:)

+3
2

, , .viewUser .

, .

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

( ) - , div .

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

+3

.mouseover(), .mousemove() - mousemove ; mouseover - .

+1

Source: https://habr.com/ru/post/1781489/

More articles:


All Articles