鼠标悬停可让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/