Question

说，我们有一个固定的宽度和固定高度DIV与背景图片。在这个div或里面有一个水平菜单，由未编号的列表和背景颜色组成。

例如，就像这样：

<div style="background-image: url("some_picture.png");>
    <ul style="background-color: some_color;">
        <li style="border-radius: 5px; padding: 10px;">Menu element 1</li>
        <li style="border-radius: 5px; padding: 10px;">Menu element 2</li>
    </ul>
</div>

没有用于将列表转换为附加水平菜单的CSS，但我添加了Padding和Border-Radius样式，以显示LI内的菜单元素名称有额外的空间。

有可能以某种方式删除活动LI下的UL背景吗？仅在选定的LI下使其透明。优先考虑边界半径。

无论是通过纯CSS还是jQuery完成。

感谢您的关注。

请帮助......

Answer 1

如上所述，如果div具有固定高度，例如div {height:200px; width: 100px;}

您可以从ul元素中删除背景并将其分配给每个li元素，从而更改背景位置：

让我猜测li的身高是50px

li {
 background-image: url(example.jpg);
 background-size: 200px 100px;
}
li:hover {background: none;}
li:nth-child(1) {background-position: 0 0;}
li:nth-child(2) {background-position: 0 50px;}
li:nth-child(3) {background-position: 100px;}
li:nth-child(4) {background-position: 0 150px;}

这是纯css，您可以使用jQuery创建变量菜单！

删除活动LI下的UL背景

1 个答案: