参照用にフィドルを作成しました：http://jsfiddle.net/kLFn9/
問題のoverflow:hiddenものが強調表示されます。
基本的に:hover:after、ツールチップを表示するために使用しています。しかし、親要素はoverflow: hiddenそれを持っています。ホバーした要素が親要素をエスケープするように強制するにはどうすればよいですか?
関連する CSS:
div {
width:500px;
height:200px;
background:red;
margin: 50px;
overflow: hidden; /* this rule */
}
span:hover:after {
content: attr(data-name);
color: black;
position: absolute;
top: -150px;;
left: 0;
}
残念ながら、子タグがoverflow:hidden親 div の宣言の効果をオーバーライドできるようにする (簡単な) 方法はありません。参照:特定のタグによるオーバーフローのオーバーライドを許可:hidden
あなたの唯一の可能な手段は、javascript を使用することです: 最初にドキュメントに対するスパンのオフセットを取得し、次にそれを DOM 内の別の場所に移動し (つまり、子を本体に直接)、その位置を絶対に設定し、取得したオフセットを使用します。 left プロパティと top プロパティを設定すると、ドキュメント内の同じ位置に配置されますが、現在は div に含まれていないため、従う必要はありませんoverflow:hidden。
I am using simple z-index for force the element hovered to escape the parent element. Please check
div {
width:500px;
height:200px;
background:red;
margin: 50px;
overflow: hidden; /* this rule */
}
span {
background: blue;
color: white;
position: relative;
top:100px;
display:block;
width: 100px;
margin: auto;
}
span:hover:after {
content: attr(data-name);
color: black;
position: fixed; /* Here I replaced position abosolute to fixed */
top: 10px; /* Here I replaced top -150px to 10px */
left: 250px; /* Here I replaced positionleft 0 to 250px */
z-index:99999;} /* Here I added new z-index property to 99999 */<div>
<span data-name="here">hover</span>
</div>何をしようとしているのかわかりませんが、ツールチップ フレームワークを再作成して、表示できるようにしました。それは基本的に煙と鏡で、:hover とそれに関連付けられた .class を呼び出します。
お役に立てれば。
場合によっては逃げることができますdiv{position: absolute;}
に設定されている場合、プレーン CSS を使用して親要素の境界を子でオーバーフローさせる方法はありませんoverflow:hidden;。可能な CSS オプションは、兄弟要素をoverflow:hidden;設定してポップアップとして表示する要素を使用することです。
子の位置を固定に設定できます。