鼠標懸停可讓div出現在圖像的邊界內

Question

當我將鼠標懸停在img的div.hover-group之上時，div div.hover-toggle變得可見，並在鼠標離開圖像時變爲不可見。 的div.hover-toggle應img的它屬於的區域內出現，以其底部邊界並且每個相等寬度的button.btn小號的對準。

舉例說明：

沒有鼠標懸停：

|-----------| 
|   | 
| img | 
|   | 
|   | 
|   | 
|-----------| 

是鼠標懸停：

|-----------| 
|   | 
| img | 
|   | 
|-----------| 
| 1 | 2 | 3 | 
|-----------| 

使用我已經完成了懸停來回切換的jQuery：

$(selector1).mouseover(function(){$(selector2).hide();}); 
$(selector1).mouseout(function(){$(selector2).show();}); 

Howeve r，如圖所示，無法將div.hover-toggle與圖像底部對齊，而是出現在圖像下方。

這怎麼辦？

謝謝！

---

我正在操縱上面的DOM出現在下面。它使用twitter引導。

<ul class="thumbnails"> 
    <li class="span3"> 
     <div class="hover-group thumbnail"> 
      <img src="http://placehold.it/260x180" alt=""> 
      <div class="hover-toggle btn-group"> 
       <button class="btn">1</button> 
       <button class="btn">2</button> 
       <button class="btn">3</button> 
      </div> 
      <h5>Thumbnail label</h5> 
      <p>Thumbnail caption right here...</p> 
     </div> 
    </li> 
... 
</ul> 

Answer 1

沒有必要對JS在這裏，你可以完成簡單的CSS和一點點的標記變化（我包的圖像，並在圖像配，包裝DIV的.hover撥動格）的一切：

<ul class="thumbnails"> 
    <li class="span3"> 
     <div class="hover-group thumbnail"> 
      <div class="image-wrapper"> 
       <img src="http://placehold.it/260x180" alt=""> 
       <div class="hover-toggle btn-group"> 
        <button class="btn">1</button> 
        <button class="btn">2</button> 
        <button class="btn">3</button> 
       </div> 
      </div> 
      <h5>Thumbnail label</h5> 
      <p>Thumbnail caption right here...</p> 
     </div> 
    </li> 
... 
</ul> 

現在它需要的造型很簡單：

.hover-group .image-wrapper { 
    /* We need this to make the .hover-toggle div relative to .image-wrapper */ 
    position: relative; 
} 

.hover-group .image-wrapper .hover-toggle { 
    /* set it at the bottom of .image-wrapper */ 
    position: absolute;  
    bottom: 0; 
    /* and don't display it */ 
    display: none; 
} 

.hover-group .image-wrapper:hover .hover-toggle { 
    /* only display it when .image-wrapper is being hovered on */ 
    display: block; 
} 

如果你想讓它顯示，當你將鼠標懸停在整個.hover組，使用CSS，而不是最後一行：

.hover-group:hover .image-wrapper .hover-toggle { 
    display: block; 
} 

Answer 2

如果你想讓你的結構不變，您可以設置div.hover撥動的高度，然後將圖像作爲下面的保證金：

margin:0 0 -30px 0; 

其中30是一個合適的數目取決於div.hover-toggle的高度。

現場演示：http://jsfiddle.net/4geFu/