Question

我有一个使用<ul>和<li>元素构建的选择框。有些列表项比父框宽，所以我添加了:after伪元素，用:hover上的完整内容覆盖它们。

除非<ul>元素有垂直滚动条，否则它都可以很好。然后隐藏叠加层并出现水平滚动条。

有没有办法在父级的垂直滚动条上显示子的子叠加层？

JSFiddle在这里：http://jsfiddle.net/x9TZB/14/（适用于Chrome，但目前崩溃IE10对我来说很奇怪。）

更新

我已经能够（通常）通过向DOM添加另一个<div>元素，将其定位在<li>元素上，以及设置一堆事件和计时器来解决我的问题。还有一些粗糙的边缘;它无论如何都不完美（特别是因为IE不支持pointer-events:none）。

如果有人找到可行的解决方案，我会保持这个问题的开放 - 如果没有，那么可能是对HTML5标准布局规则更新的默认建议： - ）

此处粘贴代码以防JSFiddle页面消失。尝试添加/删除<ul>元素中的“滚动”类以查看差异。

-- 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());
});

Answer 1

我似乎达到了你所追求的效果。这似乎有点“紧张”，但也许这对你来说是一个很好的起点。

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

看看 - http://jsfiddle.net/x9TZB/17/

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中测试它，似乎也可以正常工作。

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

1 个答案: