css - 使用 Bootstrap 将悬停效果剪辑到父级

Question

我正在尝试使用 Bootstrap 和我自己的 CSS 来创建悬停效果。问题是父容器轮播正在剪裁我的悬停效果。

我想要的外观是这样的（将鼠标悬停在具有长描述的项目上）：

http://www.ebay.com/sch/Other-/26261/i.html?rt=nc&_dmd=2

这就是我现在的尝试：

这就是我想要实现的目标：

我试过覆盖父溢出元素无济于事。

悬停效果需要：

• 轮播中所有图像的大小相同
• 覆盖它下面的任何内容

这是小提琴：小提琴

我究竟做错了什么？

Answer 1

如果您使用的是 Bootstrap，为什么不直接使用 Popover？：

$('.thumb-hover').popover({
  title: "This is a title",
  content: "This is a test",
  trigger: 'hover',
  placement: 'bottom'
});

JSFiddle

Answer 2

由于插件已经使用它，因此玩溢出似乎并不容易。

overflow您可以通过将 X 和 Y 都设置为可见来获得一些有趣的结果： demo (jsfiddle)

.carousel-container:hover {
    overflow-y: visible!important;
    overflow-x: visible!important;
}

但是，X 溢出破坏了插件风格。

但它在谷歌浏览器上根本不起作用，所以我的建议是不要使用这个插件。

---

使用另一个插件你会遇到几乎相同的问题，因为CSS overflow-x: visible; 和溢出-y：隐藏；导致滚动条问题

使用 Bootstrap Carousel 演示 (jsfiddle)

---

也许您应该考虑使用一些（自制？）JavaScript，因为轮播无论如何都需要它。