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

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时，会显示警告（打印无）。 在此之后，直到我将离开该div，我必须永远不会看到另一个警报（因为显示属性，当我调用.show（）函数时，应该被设置为块）。

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

干杯

UPDATE

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

Answer 1

因为当弹出窗口出现并且鼠标位于其上时， .viewUser的mouseout .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();
            });         
        });

演示： 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 个解决方案

解决方案1
3 已采纳 2010-12-21 16:56:41

解决方案2
1 2010-12-21 16:49:15

JQuery - 麻烦.css（&#39;display&#39;）属性

问题描述

2 个解决方案

解决方案1 3 已采纳 2010-12-21 16:56:41

解决方案2 1 2010-12-21 16:49:15

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

解决方案1
3 已采纳 2010-12-21 16:56:41

解决方案2
1 2010-12-21 16:49:15