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

Question

我有一个背景图片‘选择器’，它由一个<ul>标签使用。我有一个jquery函数，它在选择<ul>菜单项时调用Lightselector类。灯光选择器类由<li>标签呈现，但我的问题是<li>标签背景图像(lightselector类)与<ul>图像“选择器”的背景图像重叠。我试过z索引和背景位置。

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 {
    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标记中的图像，并使其更短，这样它就不会重叠。