2

当我将鼠标悬停在imgwithindiv.hover-group时，divdiv.hover-toggle变得可见，当鼠标离开图像时变得不可见。div.hover-toggle应该出现在img它所属的区域内，与其底部边框和每个相等宽度button.btn的s对齐。

为了显示：

没有鼠标悬停：

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

是鼠标悬停：

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

我已经使用 jQuery 完成了悬停切换：

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

但是，一直无法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>
4

2 回答 2

6

这里不需要 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;
}
于 2012-07-05T03:09:30.850 回答
2

如果要保持结构不变，可以设置 div.hover-toggle 的高度，然后设置图像的边距，如下所示：

margin:0 0 -30px 0;

哪个 30 是合适的数字取决于 div.hover-toggle 的高度。

现场演示：http: //jsfiddle.net/4geFu/

于 2012-07-05T03:43:07.550 回答