在悬停问题上显示div

在此提琴中，当我将鼠标悬停在“动作”上时，会显示一个下拉列表。在悬停问题上显示div

问题是当我们看到最后一个项目在滚动下方时，它看不到。在.scrollable类我已经使用了position:relative;

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

和子类“滴”有position:absolute;

我不想改变.scrollable类position:relative，我想在.drop元素comeout的滚动时可滚动，.drop不应显示在滚动下方;

这里是小提琴：http://jsfiddle.net/napper7/XPxsx/15/ THanks提前！

来源

2012-11-23 Rusty

你需要的JavaScript。 – thirtydot

如何帮助？ – Rusty

您的问题无法用纯CSS解决。你需要使用JavaScript来达到你想要的结果。 – thirtydot

这里是工作的代码，我平添了几分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-23 13:23:34 sayannayas

.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 indentation中猜测）是好的，但是更好的是按照意义顺序排列选择器，这将从最一般的到最具体的如HTML，然后身体，那么div的..你的情况.scrollable，然后.actionTools，然后.navItem ..）

希望帮助

来源

2012-11-23 13:30:57 jonBreizh

在悬停问题上显示div

回答

相关问题