0

このフィドルでは、「アクション」にカーソルを合わせると、ドロップダウンが表示されます。

問題は、最後のアイテムがスクロールの下に表示され、表示されないことです。クラスで.scrollable私はposition:relative;

.scrollable
{
    overflow: auto;
    height: 300px;
    position:relative;
    width:100px;    
}

子クラス「ドロップ」には、position:absolute;

私position:relativeは.scrollableクラスを変更したくありません。.dropホバー時に要素をスクロール可能にして、スクロールの下に表示しないようにします。.drop

ここにフィドルがあります：http://jsfiddle.net/napper7/XPxsx/15/ 事前に感謝します!!

4

2 に答える 2

3

ここに作業コードがあります。現在のカーソル位置を取得するためにjsを少し追加しました

$('.navItem').each(function() {
    $(this).hover(function(e) {
       $(this).find(".drops").css('left',e.pageX-20);   
       $(this).find(".drops").css('top',e.pageY);            

    }, function(e) {});
});​

http://jsfiddle.net/XPxsx/43/

于 2012-11-23T13:23:34.240 に答える
0 
    .scrollable
{      
    position:relative;
    height:300px;
    width:100px;    
}​

私はあなたの最善の策はオーバーフローの振る舞いをやめることだと思います。私の知る限り、オーバーフロー値が表示とは異なる場合、ネストされたdivを親の外部に表示することはできません。他の値は、ある種の外箱のコンテンツをクリップします（スクロールバーを追加するか、コンテンツを完全に非表示にすることによって）

私はあなたが望むことをするがスクロールバーなしでjsfiddleを編集しました：http： //jsfiddle.net/XPxsx/42/

そして、ここにオーバーフロー動作に関するいくつかのドキュメントがあります： http ://www.w3.org/TR/CSS21/visufx.html

これ以外は、jsを使用してDOMごとに別の場所にコンテンツを表示します。

また、より一般的な意見として：sass（cssインデントから推測）を使用するのは良いことですが、セレクターを最も一般的なものから最も具体的なもの（html、次にbody、次にdiv ..の場合は.scrollable、次に.actionTools、次に.navItem ..）

それが役立つことを願っています

于 2012-11-23T13:30:57.487 に答える