Question

当你将鼠标悬停在答案中的用户图片上时，我正在尝试做这样的事情。由于我从未使用过很多CSS，我不知道如何做到这一点。我得到了CSS和设计。数据将在服务器端加载并使用jQuery发送到页面。

我的问题是，链接可以在页面的任何位置，但都会显示在彼此之下，边距略有差异。 div总是需要在那之下。我怎么能这样做？

这是我正在使用的整个CSS。您可以复制并粘贴它。现在一切都变了。这是让我陷入困境的定位部分。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Title Less</title>
<script type="text/javascript">
$(document).ready(function() {
    $('.prod-info').click(function() {
        var data = 'id=5705';
        if(data) {
            $.ajax({
                type:"GET",
                url:"/products/info/",
                data:data,
                dataType:'json',
                beforeSend:function(x){

                },
                success: function(x){

                },
                error: function(x){

                },
            });
        }
        return false;
    });
});
</script>
<style type="text/css">
#prod-menu {
    -moz-border-bottom-colors: none;
    -moz-border-image: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background-color: #505050;
    border-color: #444444 #1C1C1C #1C1C1C;
    border-radius: 4px 4px 4px 4px;
    border-right: 1px solid #1C1C1C;
    border-style: solid;
    border-width: 1px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5), 0 1px 0 #727272 inset;
    color: #E3E3E3;
    font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif;
    font-size: 11px;
    line-height: 1.2;
    padding: 10px;
    position: relative;
    text-align: left;
    width: 300px;
    z-index: 320;

}
#prod-menu .pm-gravatar {
    float: left;
    margin-right: 8px;
}
#prod-menu .pm-header-info .pm-prod-link, #prod-menu .pm-header-info .mod-flair {
    color: #E2E2E2 !important;
    font-size: 18px;
}
#prod-menu .pm-header-info .pm-flair .badgecount, #prod-menu .pm-header-info .pm-flair .reputation-score {
    color: #E2E2E2;
}
#prod-menu .pm-about-me {
    clear: both;
    font-size: 11px;
    margin: 5px 0;
    overflow: hidden;
}
#prod-menu .pm-links a {
    font-size: 11px;
    margin-right: 8px;
}
#prod-menu a, #prod-menu a:visited {
    color: #B4D4EC;
    text-decoration: none;
}
#prod-menu a:hover {
    color: #DCECF7;
}
</style>
</head>
<body>

<div id="container">

<div class="prod-info">I am Link A</div>
<div class="prod-info" style="margin-top:150px;margin-left:100px">I am Link B</div>
<div class="prod-info" style="margin-top:300px;margin-left:200px">I am Link C</div>

<div id="prod-menu">
I am the product info div!
</div>

</div>

</body>
</html>

Answer 1

您可以添加以下内容：

$('.prod-info').mouseenter(function () {
    currTop = $(this).offset().top+20;
    currLeft = $(this).offset().left;
    $('#prod-menu').css({
        top: currTop + "px",
        left: currLeft + "px",
        display: "block"
    })
});
$('.prod-info').mouseleave(function () {
    currTop = $(this).offset().top;
    currLeft = $(this).offset().left;
    $('#prod-menu').css({
        display: "none"
    })
});

我还将position:relative替换为position:absolute。

希望得到这个帮助。

检查Fiddle

如何在点击链接下定位div？

1 个答案: