使用Bootstrap将悬停效果裁剪为父级

Question

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

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

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

这就是我现在的尝试：

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

我尝试重写父溢出元素无济于事。

悬停效果需要：

• 旋转木马中所有图像的尺寸相同
• 覆盖其下的任何内容

这是小提琴：Fiddle

我做错了什么？

Answer 1

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

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

JSFiddle

Answer 2

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

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

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

但是，X溢出会破坏插件样式。

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

---

你会得到与另一个插件几乎相同的问题，因为CSS overflow-x: visible; and overflow-y: hidden; causing scrollbar issue

Demo with Bootstrap Carousel (jsfiddle)

---

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