css - Bootstrapを使用して親にクリップされたホバー効果

Question

Bootstrapと自分のcssを使用してホバー効果を作成しようとしています。問題は、親コンテナであるカルーセルがホバー効果をクリップしていることです。

私が探している外観は次のようなものです（長い説明のあるアイテムにカーソルを合わせます）：

これは私の試みが今どのように見えるかです：

ここに画像の説明を入力してください

これは私が達成しようとしていることです：

ここに画像の説明を入力してください

親のオーバーフロー要素をオーバーライドして無駄にしようとしました。

ホバー効果は次のことを行う必要があります。

これがフィドルです：フィドル

私は何が間違っているのですか？

score 2 · Accepted Answer

Bootstrapを使用している場合は、Popoverを使用しないのはなぜですか？：

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

JSFiddle

score 0 · Accepted Answer

プラグインがすでにオーバーフローを使用しているため、オーバーフローを操作するのは簡単ではないようです。

XとYの両方をvisibleに設定することで、興味深い結果を得ることができoverflowます：demo（jsfiddle）

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

ただし、Xオーバーフローはプラグインスタイルを壊します。

しかし、それはグーグルクロームではまったく機能しないので、私のアドバイスはこのプラグインを使用しないことです。

カルーセルではとにかくJavaScriptが必要なので、（自家製？）JavaScriptの使用を検討する必要があるかもしれません。