我想股利我的TD的如圖片

Question

我有這樣的HTML代碼所示：

<table> 
    <tr> 
     <td> 
      <p id="price">10000</p> 
      <div class="no" hidden="hidden">Description</div> 
     </td> 
    </tr> 
</table> 

我的jQuery代碼是：

<script type="text/javascript"> 
    $(document).ready(function(){ 
     $("#price").live("mouseenter", function() { 
      $(this).next("div.no").show(); 
     }); 
     $("#price").live("mouseleave", function() { 
      $(this).next("div.no").hide(); 
     }); 
    }); 
</script> 

現在我想的標籤在特定的高度。 讓我描述你在圖片：

進入鼠標表就像在此之前：

但我要的東西：

進入鼠標上面的代碼將使得在此之後有如下所示： 我該怎麼做？

Answer 1

也許這可以幫助你：

我用來代替現場懸停，因爲你再造一個「onElementEventMouse」點擊此處查看： http://jsfiddle.net/9bbz5/

HTML：

<table> 
    <tr> 
     <td> 
      <p id="price">10000</p> 
      <div class="no" hidden="hidden">Description</div> 
     </td> 
     <td> 
      <p id="price">10000</p> 
     </td> 
     <td> 
      <p id="price">10000</p> 
     </td> 
    </tr> 
</table> 

CSS：

個

#price { 
    background-color: yellow; 
    height:40px; 
    width: 200px; 
} 
td { 
    text-align: center; 
} 
.no {  
    background-color: red; 
    padding: 15px; 
    margin-top: -30px; 
    width: 150px; 
    position: absolute; 
} 

JS：

$(document).ready(function(){ 
    $("p#price").hover(
     function() { 
     $(this).next("div.no").show(); 
     }, 
     function() { 
     $(this).next("div.no").hide(); 
     }); 
    }); 

希望它能幫助！

Answer 2

使用css給它一個絕對位置，並且如果由於某種原因div落後於td，則添加一個z-index。

Answer 3

保持原始DIV隱藏，製作它的克隆，並將其絕對放置在相對於您已懸停的TD的文檔中。

喜歡的東西：

$(document).ready(function(){ 
     var cloned_div; 
     $("#price").live("mouseenter", function() { 
      cloned_div = $(this).next("div.no").clone(); 
      // determine position of the hovered TD 
      // position cloned DIV based on that 
      // show cloned div 
     }); 
     $("#price").live("mouseleave", function() { 
      // destroy/remove cloned div 
     }); 
    }); 

在克隆jQuery的文檔：http://api.jquery.com/clone/

Answer 4

這應該可以通過CSS來解決。您可以將div.no設定爲負的頂部邊緣，使其重疊在p＃價格

Answer 5

讓我們考慮的CSS（只是暫時的目的）

.no{ 
    display:none; 
    height:10px; 
    width:10px; 
    background-color:YELLOW; 
} 
#price{ 
    background-color: RED; 
} 

的JavaScript代碼如下：

$(document).on("mouseenter","#price", function (e) { 
    $(this).next("div.no").show().css({ 
     position: "absolute", 
     marginLeft:e.clientX + "px", 
     marginTop: e.clientY + "px" 
    }); 
}); 
$(document).on("mouseleave", "#price",function() { 
    $(this).next("div.no").hide(); 
}); 

試試這個代碼我相信它有助於你得到了什麼。 我已添加jsfiddle鏈接以及您的測試如下： http://jsfiddle.net/CeYkx/1/