代码之家 › 专栏 › 技术社区 › XMen

鼠标悬停弹出窗口有时会造成问题

mouseover jquery

XMen · 技术社区 · 15 年前

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js" type="text/javascript"></script>
<style type="text/css">
.user-bg {
background:-moz-linear-gradient(center bottom , #0E0E0E 70%, #9B9B9B 100%) repeat scroll 0 0 transparent !important;
}
.user {
    display:block;
    padding:5px;
    position:absolute;
    width:auto;
    z-index:5;
}
.user-avatar {
background-color:#FFFFFF;
cursor:pointer;
height:54px;
padding:1px;
text-align:center;
width:54px;
z-index:100;
}
.user-avatar-text {
float:right;
margin:0 auto auto 58px;
padding:2px;
}
.ui-widget {
font-family:MyriadPro,Helvetica,Arial,sans-serif !important;
font-size:12px !important;
}
.user-active {
background:-moz-linear-gradient(right bottom , #2A1117 0%, #B51F77 57%, #E9204F 100%) repeat scroll 0 0 transparent !important;
}
.ui-corner-all {
-moz-border-radius:4px 4px 4px 4px !important;
}
.ui-corner-all {
    -moz-border-radius:4px 4px 4px 4px !important;
}
.ui-corner-all {
    -moz-border-radius:6px 6px 6px 6px;
}
.user-avatar-image {
background:url("images/avatars/default.png") no-repeat scroll center center #000000;
height:46px;
margin:1px;
padding:1px;
width:46px;
}
</style>
</head>
<body>
<div class="user ui-corner-all " id="user-1" style="left: 288px; top: 299px;">   
    <div class="user-avatar-text ui-widget ui-corner-all" id="user-avatar-text-1" style="visibility: hidden;">      
        <span class="user-name">Rahul</span><br>      
        <button id="user-info-1" class="ybutton user-info">Details</button>    
    </div>   
    <div class="ui-corner-all user-avatar user-active" id="user-avatar-1" style="visibility:visible;">   
        <div class="ui-corner-all user-avatar-image-bg">    
            <div id="user-avatar-image-1" style="background:url('4cc7ea9c6daee.jpg') no-repeat scroll center center rgb(0, 0, 0);" class="ui-corner-all user-avatar-image">      </div>  
        </div>   
    </div>        
        <div class="user-halo ui-corner-all ui-resizable ui-resizable-autohide" id="user-halo-1" style="visibility: hidden;">
        <div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 1001; -moz-user-select: none; display: none;" unselectable="on"></div>
        </div>    
        <div class="user-chat ui-state-error ui-corner-all" id="user-chat-1" style="visibility: hidden;"></div>  
    </div>
</body>
</html>
<script  type='text/javascript'>
$(document).ready(function(){
    var popup_pos=$('#card-208').offset();
    var timer;
    $("#user-avatar-1").bind('mouseover',{},function() {

         timer=setTimeout(function() {
            $('#user-1').addClass('user-bg');
            $('#user-avatar-text-1').css('visibility','visible');
            $('#user-1').hover(
                function() {
                    $('#user-1').addClass('user-bg');
                    $('#user-avatar-text-1').css('visibility','visible');
                },
                function() {
                    if(timer) {
                        clearTimeout(timer);
                        timer = null
                       }
                    //~ App.currentMode = null;         
                    $(this).removeClass('user-bg');
                    $('#user-avatar-text-1').css('visibility','hidden');
                }
            );

        }, 1000);
     });    

});
</script>

当我将鼠标悬停在avtar上时,将显示文本DIV,当我将用户1 DIV鼠标悬停时,弹出窗口将只删除avtar。这应该是完美的,但它产生了一些问题,比如当我鼠标悬停的时候,文本DIV并没有隐藏,它仍然存在。

请提出问题所在。

当做

小精灵

1 回复 | 直到 15 年前

Blair McMillan 15 年前

尝试将您的资料转移到悬停事件中。有点像 http://jsfiddle.net/8Mqk7/5/

$(document).ready(function() {
    var timer;
    $("#user-1").hover(function(e) {
        $("#user-avatar-image-1").mouseover(function(e) {
            timer = setTimeout(function() {
                $('#user-1').addClass('user-bg');
                $('#user-avatar-text-1').css('visibility', 'visible');
            }, 1000);
        });
    }, function() {
        $("#user-avatar-image-1").unbind('mouseover');
        clearTimeout(timer);
        timer = null;     
        $(this).removeClass('user-bg');
        $('#user-avatar-text-1').css('visibility', 'hidden');
    });
});

不过,我不太确定你想让它看起来怎么样。

编辑: 现在只显示文本,如果你将鼠标悬停在黑匣子上,我相信你的图像将在那里。