2

我有一个用<ul>和<li>元素构建的选择框。一些列表项比父框更宽，所以我添加了一个:after伪元素来用:hover.

一切都很好，除非<ul>元素有垂直滚动条。然后覆盖层被隐藏并出现一个水平滚动条。

有没有办法在父级的垂直滚动条上显示子级覆盖？

JSFiddle 在这里：http: //jsfiddle.net/x9TZB/14/（在 Chrome 中工作，但目前我的 IE10 崩溃了......很奇怪。）

更新：

我已经能够解决我的问题（大部分），方法是向<div>DOM 添加另一个元素，将它定位在<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());
});
4

1 回答 1

0

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

我将列表包含在一个 div 中，溢出-y 设置为滚动。然后，我将 li 的位置设置为悬停时的绝对位置，并增加 z-index。更改 z-index 似乎会导致“紧张不安”。这在 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 中对其进行了测试，似乎也可以正常工作。

于 2013-04-12T01:00:26.960 回答