Question

我有一个<ul>标签使用的背景图片'选择器'。我有一个jquery函数，在选择<ul>菜单项时调用Lightselector类。光选择器类由<li>标记呈现，但我的问题是<li>标记背景图像（lightselector类）与<ul>图像'选择器'的背景图像重叠。我已经尝试了z-index和背景位置。

HTML：

<ul>BUMPER STICKERS
    <li>hello </li>
    <li>This is a paragraph.</li>
</ul>
<ul>BUMPER STICKERS
    <li>This is a paragraph.</li>
    <li>This is a paragraph.</li>
</ul>

<li> lightselector：

.LightSelector {
    background-image: url(../Images/Template%20Images/Lightblue.png);
    background-position:0% 0%;
    background-repeat: no-repeat;
}

<ul>背景图片：

ul {
    background-image: url(../Images/Template%20Images/selector.png);
    background-position:13% 102%;
    background-repeat: no-repeat;
}

jQuery的：

$(document).ready(function () {
    $("ul").click(function (evt) {      
        if (evt.target.tagName != 'UL') return;
        $("li", this).toggle();
    });
});

Answer 1

请检查：jsfiddle.net/Nz3Fc/1/

我不确定我是否理解你，但基本上我将<ul>背景图片放在标题文字上以永久可见，并且我在标题显示时显示<li>背景图片点击显示相应的。

由于标题文本不再是<ul>的一部分，因此您不必为另一个人切换背景，因为它们是独立的。如果它有帮助让我知道。

代码如下：

<强> HTML：

<p>BUMPER STICKERS</p>
<ul>    
    <li>This is a paragraph.</li>
    <li>This is a paragraph.</li>    
</ul>

<p>BUMPER STICKERS</p>
<ul>
    <li>This is a paragraph.</li>
    <li>This is a paragraph.</li>    
</ul>

<强> CSS：

p {
    background-image: url(http://placehold.it/200x50);
    background-position:13% 50%;
    background-repeat: no-repeat;
}

ul {   
    background-position:13% 102%;
    background-repeat: no-repeat;
}

.LightSelector {
    background-image: url(http://placehold.it/100x400);
    background-position:0% 0%;
    background-repeat: no-repeat;
}

<强> JS：

$(document).ready(function () {

    $("p").click(function () {              
        $("ul li").toggle();        
    });

     $("ul li").click(function(e){
       e.preventDefault();
       $("ul li").addClass("LightSelector").not(this).removeClass("LightSelector");
    });

});

Answer 2

我刚刚更改了li标签内的图像并将其缩短，因此它不会重叠。

<ul>图像与<li>图像重叠</li> </ul>

2 个答案: