Question

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

我想要的是，当我用鼠标继续使用div viewUser 时，会显示警告（打印 none ）。在此之后，直到我离开那个div，我绝不会看到另一个警报（因为 display 属性，当我调用.show（）函数时，应该被设置为 block ）。

但事实并非如此：实际上有些时候（当我仍然使用鼠标移动 viewUser 时）我看到警报。为什么会出现这种情况？

干杯

更新

事实上，我想做的是：当我在 viewUser div中使用鼠标时，我会对服务器进行ajax调用以获取一些信息并附加它到 popupUser 。所以，每当我在div上移动鼠标时，我都不会调用这个ajax调用：）

Answer 1

因为当弹出窗口出现并且鼠标位于其上时，.viewUser的mouseout会触发并再次关闭..

如果要跟踪元素，请相对于鼠标重新定位。

        $(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();
            });         
        });

演示：http://www.jsfiddle.net/gaby/RQhTp/

解决方案（评论之后的）是为mouseout使用超时，以便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)); }); });

演示：http://www.jsfiddle.net/gaby/RQhTp/3/

Answer 2

您需要.mouseover()而不是.mousemove() - mousemove使您能够跟踪该元素中鼠标的每一次移动; mouseover仅用于初始鼠标接触。

JQuery - 麻烦.css（'display'）属性

2 个答案: