Question

我有一些简单的问题。

看看我的代码：

Demo

当我将鼠标悬停在img上时显示描述div。但我想在图像底部显示不在地图顶部的描述div。

Answer 1

我已经尝试清理并稍微更改了您的代码，所以首先，标记位于地图上，而标记的描述就在它下方。

请注意，我已经创建了一个描述容器，其中包含点和描述。此外，我在js中改变了一点。

http://jsfiddle.net/9RxLM/2465/

代码如下所示：

<强> HTML

<div class='map'>
    <div class='description-container' style="top: 200px; left: 200px;">
        <div class="hoverable">
            <img src="point.png" />
        </div>
        <div class='description'>
             <h2>taaa</h2>

            <p>descriiption</p>
        </div>
    </div>
</div>

<强> CSS

.map{
    background: url("http://webhelp.pl/pictures/zasoby/mapka_363.png");
    width: 528px; 
    height: 495px; 
    background-repeat: no-repeat;
}

.description-container{
    position: absolute; 
    top: 200px; 
    left: 200px;
}

.description {
    display: none;
    width: 300px;
    padding: 10px;
    background: #EEEFEB;
    color: #000000;
    border: 1px solid #4D4F53;
    margin: 0px;
    -webkit-box-shadow: 0px 0px 5px 0px rgba(164, 164, 164, 1);
    box-shadow: 0px 0px 5px 0px rgba(164, 164, 164, 1);
    position: relative;
    margin-left: -50%;
}

.description h2 {
    background-color: #4D4F53;
    color: #E3E5DD;
    font-size: 14px;
    display: block;
    width: 100%;
    margin: -10px 0px 8px -10px;
    padding: 5px 10px;
}

<强> JS

$(".description-container .hoverable").mouseover(function () {
    $(this).parent(".description-container").find(".description").show();
}).mouseout(function () {
    $(this).parent(".description-container").find(".description").hide();
});

希望这会对你有所帮助。

Answer 2

使用bottom: 0

使描述绝对定位

.description {
    display: none;
    width: 400px;
    padding: 10px;
    background: #EEEFEB;
    position: absolute;
    bottom: 0;
    color: #000000;
    border: 1px solid #4D4F53;
    margin: 0px;
    -webkit-box-shadow: 0px 0px 5px 0px rgba(164, 164, 164, 1);
    box-shadow: 0px 0px 5px 0px rgba(164, 164, 164, 1);
}

演示：Fiddle

Answer 3

像这样使用

$(".description2").mouseover(function(e) {
   $(this).children(".description").css("margin-left",e.pageX);
   $(this).children(".description").css("margin-top",e.pageY);
   $(this).children(".description").show();
}).mouseout(function() {
   $(this).children(".description").hide();
})

Demo

Answer 4

以下是一个解决方案：

postion:relative

和

position:absolute;

查看更新的fiddle。

Answer 5

只需将style="position: absolute; left: 457px; top: 228px;"转到说明2，就可以了。

Answer 6

像这样改变你的CSS

而不是保证金：0px 使用此margin-top：375px;

隐藏div的Jquery位置

6 个答案: