Question

在这个小提琴中，当我将鼠标悬停在“动作”上时，你会显示下拉列表。

问题是当我们看到滚动下方的最后一个项目时，它没有被看到。在.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/ 提前谢谢!!

Answer 1

这是一个工作代码，我添加了一些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/

Answer 2

    .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 ..）

希望有所帮助

在悬停问题上显示div

2 个答案: