我试图淡入淡出背景图像到我的列表项。我用尽了一切，但无法找到它......jQuery背景图像淡入

HTML：

<li id="een"> 
    <h1>Title</h1> 
    <p id="text1">Text</p> 
</li>

的jQuery：

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

来源

2012-11-01 user1792530

尝试在'''中包装图像的URL，并确保图像的相对路径是有效的。你也可以看看这里：http://stackoverflow.com/questions/512054/setting-background-image-using-jquery-css-property – Ezze

你需要作出这样的定位绝对背景的img元素在一个亲戚家里面。

jsFiddle

这里是我的意思的例子。

HTML通知我添加一个div类li-background在每个li第一项。这将由CSS编辑，不会在加载时显示，并且绝对位于其相对定位的li父级中。我也将它的z-index设置为-1，所以它不会显示来自文本或李的任何其他项目，所以它的背景！

<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>

CSS

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%; 
}

JQ脚本

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

来源

2012-11-01 20:43:58 SpYk3HH

哇，非常感谢你！你让我的一天哈哈 – user1792530

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

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

来源

2012-11-01 21:52:37 Felix

jQuery背景图像淡入

回答

jsFiddle

相关问题