1

当您将鼠标悬停在答案中的用户图像上时，我正在尝试执行类似于此站点的操作。因为我从来没有过多地使用过 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>
4

1 回答 1

4

您可以添加以下语句：

$('.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.

希望这有帮助。

检查小提琴

于 2013-10-04T13:37:40.733 回答