jquery隱藏div的位置

Question

我有一些簡單的問題。

看我的代碼：

Demo

詳細描述格顯示當我鼠標移到img。但我想顯示在圖像底部的描述div不在地圖頂部。

Answer 1

只需要style="position: absolute; left: 457px; top: 228px;"結束描述2，你很好去。

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

改變這樣

，而不是marging你的CSS：0像素 使用這種邊距：375px;

Answer 6

我試着清理一下，稍微改了一下你的代碼，所以首先，標記在地圖上，而屬於標記的描述就在它的下面。

請注意，我已創建了一個描述容器，其中包含點和描述。此外，我在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(); 
}); 

希望這會對你有幫助。