gpt4 book ai didi

css - 跨越 ul 的宽度跨越 li 元素的填充

转载 作者:行者123 更新时间:2023-11-28 11:27:17 28 4
gpt4 key购买 nike

我在水平导航栏上有一个下 zipper 接,如下所示:

<ul>
<li></li>
<li></li>
<li>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</li>
</ul>

第一个ul是相对定位,第二个ul是绝对定位。第二个ul有一个类,我通过它设置了一个百分比宽度(大约200%到250%,我不记得了)。但是,其中的 li 元素具有与设置的内边距一样大的翻转背景。我想要做的是让填充跨越 ul 的整个宽度,这样当用户滚动链接时,整行都会突出显示。

目前我没有任何示例代码。也许在几个小时后我会对其进行编辑。希望以上内容足以让一些想法滚动。

最佳答案

按照您的示例和您提供的文本,我构建了这个: fiddle .

这与您所追求的接近吗?如您所见,第二里的黄色突出显示了全长:

so that when the user rolls over the link, the entire row gets highlighted.

如果没有,也许您可​​以在 jsfiddle 中填写详细信息并更新它以帮助我们解决问题。

这是代码。主要技巧是将显示设置为在悬停时阻塞:

HTML:

<ul id='firstUl'>
<li>1</li>
<li>2</li>
<li>3
<ul id='secondUl'>
<li><a>3</a></li>
<li><a>4</a></li>
<li><a>5</a></li>
</ul>
</li>
</ul>

CSS:

#firstUl
{
background-color:green;
position:relative;
}

#secondUl
{
width:200%;
background-color:blue;
position:absolute;
}

.li
{
background-color:red;
}

#secondUl li
{
width:100%
}

#secondUl li:hover a
{
background-color:yellow;
display:block;
}

关于css - 跨越 ul 的宽度跨越 li 元素的填充,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21302979/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com