0

在这个小提琴中，当我将鼠标悬停在“动作”上时，你会填写一个下拉菜单。

问题是当我们看到最后一个项目时它在滚动下方并且看不到。在.scrollable课堂上我用过position:relative;

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

子类“drop”有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 具有与可见不同的溢出值时，无法在其父级之外显示嵌套 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 回答