鼠标悬停以使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();});

但是,div.hover-toggle如图所示,无法与图像底部对齐,而是显示在图像下方.

如何才能做到这一点？

谢谢!

---

我正在操作的DOM如下所示.它使用twitter bootstrap.

<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和一点标记更改完成所有事情(我将图像和.hover-toggle div包装在.image-wrapper div中):

<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-group上时显示,请使用此CSS代替最后一行:

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