Html 是否可以在父元素上显示子元素'；使用CSS的y形滚动条？

我有一个用

和

元素构建的选择框。一些列表项比父框宽，因此我在

之后添加了一个
：伪元素，以将它们与
：hover
上的完整内容覆盖在一起

除了
元素有一个垂直滚动条外，所有这些都非常有效。然后覆盖层被隐藏，出现一个水平滚动条

是否有某种方式可以在父级的垂直滚动条上显示子级覆盖

JSFiddle：（在Chrome中工作，但目前我正在崩溃IE10…很奇怪。）

更新：

通过向DOM中添加另一个
元素，将其放置在
元素上，并设置一组事件和计时器，我（大部分）已经能够解决我的问题。还有一些粗糙的边缘；无论如何，它都不是完美的（特别是因为IE不支持
指针事件：none
）

我将保留这个问题，以防有人找到一个有效的解决方案——如果没有，那么也许是作为一个更新HTML5标准布局规则的默认建议：-）


代码粘贴在这里，以防JSFIDLE页面消失。尝试从
元素中添加/删除“scrolling”类以查看差异

-- CSS --

ul {
    position: absolute;
    display: block;
    margin: 0;
    list-style-type: none;
    border: 1px solid #aaaaaa;
    width: 150px;
    font: 12px verdana, arial, sans-serif;
    padding: 0;
    overflow-x: visible;
}
ul.scrolling {
    overflow-y: scroll;
    margin-right: -16px;
}
li {
    position: relative;
    margin: 0;
    padding: 0 5px;
    line-height: 25px;
    text-overflow: ellipsis;
    -ms-text-overflow: ellipsis;
    white-space: nowrap;
    color: black;
    cursor: pointer;
    overflow: hidden;
}
ul.scrolling > li {
    padding-right: 6px;
}
li:hover {
    background-color: #c7e0ff;
    overflow: visible;
}
li:hover:after {
    content: attr(contents);
    position: absolute;
    left: 0;
    top: 0;
    padding: 0 5px;
    z-index: 999999;
    background-color: #c7e0ff;
}


-- HTML --

<ul class="scrolling">
    <li>Lorem ipsum</li>
    <li>Dolor sit amet</li>
    <li>Consectetur adipisicing elit</li>
    <li>Sed do eiusmod tempor</li>
    <li>Incididunt ut labore et dolore</li>
    <li>Magna aliqua</li>
    <li>Ut enim ad minim veniam</li>
    <li>Quis nostrud exercitation</li>
    <li>Ullamco laboris nisi ut</li>
    <li>Aliquip ex ea commodo consequat</li>
    <li>Duis aute irure dolor</li>
    <li>In reprehenderit</li>
    <li>In voluptate velit esse</li>
    <li>Cillum dolore eu fugiat nulla pariatur</li>
    <li>Excepteur sint occaecat</li>
    <li>Cupidatat non proident</li>
    <li>Sunt in culpa qui officia</li>
    <li>Deserunt mollit anim id est laborum</li>
</ul>


-- JavaScript (using jQuery) --

//Make sure this is run after the DOM is ready.
$('li').each(function () {
    $(this).attr('contents', $(this).html());
});

--CSS--
保险商实验室{
位置：绝对位置；
显示：块；
保证金：0；
列表样式类型：无；
边框：1px实心#AAAAA；
宽度：150px；
字体：12px verdana，arial，无衬线；
填充：0；
溢出x：可见；
}
滚动{
溢出y：滚动；
右边距：-16px；
}
李{
位置：相对位置；
保证金：0；
填充：0 5px；
线高：25px；
文本溢出：省略号；
-ms文本溢出：省略号；
空白：nowrap；
颜色：黑色；
光标：指针；
溢出：隐藏；
}
ul.scrolling>li{
右边填充：6px；
}
李：悬停{
背景色：#c7e0ff；
溢出：可见；
}
李：悬停：之后{
内容：attr（contents）；
位置：绝对位置；
左：0；
排名：0；
填充：0 5px；
z指数：999999；
背景色：#c7e0ff；
}
--HTML--

同侧眼睑
多洛·希特·阿梅特
阿迪皮斯精英圣职酒店
临时行政长官
劳动和福利费
大阿利夸酒店
我们在这里吃小菜
诺斯特鲁德实习
乌拉姆科实验室
Aliquip ex ea commodo consequat
二人世界
受到谴责
在沃鲁帕特·维利特·埃塞
无壁纤毛
圣奥凯卡除外
不冒失
不可推卸责任
这是我的劳动

--JavaScript（使用jQuery）--
//确保在DOM就绪后运行此操作。
$（'li'）。每个（函数（）{
$（this.attr（'contents'，$（this.html（））；
});
我似乎达到了你想要的效果。这似乎有点“紧张”，但也许这是一个很好的起点

我将列表包含在一个div中，overflow-y设置为scroll。然后，我将li的位置设置为绝对，并在悬停时增加z指数。改变z指数似乎会引起“紧张”。
这在Chrome中起作用

看看-

css更改

li:hover{z-index:1;position:absolute;}
#listContainer{z-index:0;width:150px;height:200px;border:1px solid red;overflow-y:scroll;overflow-x:visible;}

更新：这在没有安全壳div的情况下有效。只需从上面的提琴中移除div即可。。也在IE9中进行了测试，似乎也能正常工作。
您必须将子元素附加到其初始父元素之外的内容，例如主体。@Interrobang:谢谢，这是一个开始。但是，一旦元件就位，当用户轻推鼠标时，
将在
上触发
mouseout
。使用
指针事件：none
不是一个选项，因为我必须支持IE9。因此，如果可能的话，使用CSS
：after
元素进行覆盖将更加优雅。这似乎是一项艰巨的任务。您是否尝试过在ul周围使用div容器，并设置适当的边框样式，然后滚动div而不是列表？@lukeocom:是的，我尝试过。无论子元素嵌套的深度如何，溢出和滚动行为似乎是相同的。