javascript - ホバー画像付きのスクロール可能な div (overflow:hidden)

Question

overflow:auto を含む div と内部にテーブルがあります。div は、必要に応じて垂直スクロール バーを作成します。ただし、各行のプレビュー ホバー状態が必要です。これは、このホバー状態の Div が含まれている div の境界を超えなければならないことを意味します。コンテンツを非表示にするようにオーバーフローが既に設定されている状態でこれを行うにはどうすればよいですか... z-index では、親をエスケープできません。

Answer 1

私は最近、同様の問題を解決しました。これはあなたを助けるはずです:

https://stackoverflow.com/a/13383906/1063287

関連する jsfiddle も参照してください。

http://jsfiddle.net/rwone/eeaAr/

html

<div id="wrapper">
<div id ="hbar_one"></div>
<div id="hbar_two"></div>
<div id="container_a">
<div id="container_b">
<div class="class1 class2 magic" data-unique-content=".hidden_db_data_div">
<img src="http://lorempixel.com/g/50/50/">
<div class="hidden_db_data_div">
some amazing html
</div>
</div>
<div class="class1 class2 magic" data-unique-content=".hidden_db_data_div">
<img src="http://lorempixel.com/g/50/50/">
<div class="hidden_db_data_div">
more amazing html
</div>
</div>
<div class="class1 class2 magic" data-unique-content=".hidden_db_data_div">
<img src="http://lorempixel.com/g/50/50/">
<div class="hidden_db_data_div">
even more amazing html
</div>
</div>
</div>
</div>
<div id="hbar_three"></div>
<div id="hbar_four"></div>
</div>

CSS

#wrapper {
width: 300px;   
}
#hbar_one {
background: #cc0000;   
height: 50px;
}

#hbar_two {
background: #ffcc00;   
height: 50px;
}

#container_b {
height: 100px;
overflow-y: auto;
}

.hidden_db_data_div {
display: none;
background: #00AFF0;
width: 120px;
height: 150px;
color: red;
position:absolute;
overflow: hidden; 
z-index: 999;  
}

img {
width: 50px;
height: 50px;
}

.magic {
display: inline;
}

#container_a { position:relative; }

#hbar_three {
background: #cccccc;   
height: 50px;
}

#hbar_four {
background: #000000;   
height: 50px;
}

脚本

$(".magic").hover(
function () {
$(this)
.find('.hidden_db_data_div')
.css({'left':$(this).position().left+20 + "px", 'top':'-20px'})
.fadeIn(200);
},
function() { 
$(this)
.find('.hidden_db_data_div')
.fadeOut(100);
}                
);

Answer 2

これは垂直スクロールバーであるため、overflow-y:scroll を設定して、オーバーフローを水平方向に設定しないようにすることができます。次に、画像が水平方向の境界のみを残すようにしてください (垂直方向ではありません)。

次回は、フィドルを作成してください: http://jsfiddle.net/ そうすれば、さらに迅速にお手伝いできます:)

Answer 3

を使用して、コンテナをオーバーフローさせたい div の可視値にposition:absolute;設定します。z-index