jQuery背景图像fadeIn

我正在尝试将背景图像淡入我的列表项。我什么都试过了，但是找不到

HTML:

---

您需要创建一个背景img元素，该元素位于相对父元素内的绝对位置

这是我的意思的一个例子

HTML注意，我在每个

li

中添加了一个div，其中类

li background

作为第一项。CSS将对其进行编辑，使其在加载时不显示，并绝对定位在其相对定位的li父级中。我还将其

z-index

设置为-1，这样它就不会显示在文本的from或li中的任何其他项中，因此它是一个背景

jQ脚本

如果你真的想使用背景，你也可以使用。像这样：

if ($('#testDiv').hasClass('class1'))
    $('#testDiv').switchClass("class1", "class2", 500);
else 
    $('#testDiv').switchClass("class2", "class1", 500);

---

尝试将图像的URL包装在

“

中，并确保图像的相对路径有效。你也可以看看这里：

$('#een').mouseenter(function(){
    $('#een').css("background-image", "url(images/een.png)");
});

<ul>
    <li id="een">
        <div class="li-background"><img src="http://www.freenew.net/upload/pscreen/47/gradient-screensaver-32.jpg" /></div>
        <h1>Title</h1>
        <p id="text1">Text</p>
    </li>
    <li id="een">
        <div class="li-background"><img src="http://www.freenew.net/upload/pscreen/47/gradient-screensaver-32.jpg" /></div>
        <h1>Title2</h1>
        <p id="text1">Text2</p>
    </li>
    <li id="een">
        <div class="li-background"><img src="http://www.freenew.net/upload/pscreen/47/gradient-screensaver-32.jpg" /></div>
        <h1>Title3</h1>
        <p id="text1">Text3</p>
    </li>
    <li id="een">
        <div class="li-background"><img src="http://www.freenew.net/upload/pscreen/47/gradient-screensaver-32.jpg" /></div>
        <h1>Title4</h1>
        <p id="text1">Text4</p>
    </li>
</ul>

ul li { position: relative; }
ul li:hover { color: white; }
.li-background {
    display: none;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1;
}
.li-background img {
    height: 100%;
    width: 100%;
}

$("li").hover(function(eIn) {
        $(this).children(".li-background").stop().fadeIn();
    },
    function(eOut) {
        $(this).children(".li-background").stop().fadeOut();
    });

if ($('#testDiv').hasClass('class1'))
    $('#testDiv').switchClass("class1", "class2", 500);
else 
    $('#testDiv').switchClass("class2", "class1", 500);