所以我試圖通過在mouseleave淡出它來操縱我的背景。目標與jQuery的內聯CSS背景
但我不能用jquery來定位它。
的jQuery：
$("html").mouseleave(function(){
$('#intro').fadeTo('slow',0.67,function(){
$("#intro").css("background"); //attempting to target bg
});
});
CSS：
#intro{
background: url("images/overlay.png"), url("../../images/intro.jpg");
}
如何定位這個背景是什麼？
當你調用$（ '＃前奏'）你說要動畫介紹的透明度。fadeTo。 fadeTo的第三個參數是一個動畫完成後調用的函數，你不能用它來改變fadeTo的目標。元素的不透明性總是影響其後代。你不能使用fadeTo來實現你想要的。
作爲解決方法，將介紹的背景圖像設置爲::之後的僞元素。將其不透明度初始化爲0.67，並在懸停時將其更改爲1.0。見這個片段的細節：
body{
background: #000;
}
#intro{
position: relative;
width: 300px ;
height: 300px ;
}
#intro::after{
content: "";
background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg/550px-Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg);
opacity: 0.67;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
transition: opacity 600ms;
}
#intro:hover::after{
opacity: 1;
}
#intro p{
color: #fff;
}
#intro img{
width: 100px ;
height: auto ;
}<div id="intro">
<p>La Gioconda</p>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg/550px-Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg"/>
</div>$("html").mouseleave(function(){
$('#intro').fadeTo('slow',0.67,function(){
$("#intro").css('background-image', 'url(' + imageUrl + ')'); //attempting to target bg
});
});
這仍然是針對div內的所有元素。 – Joel
Aprroach1：
$("html").mouseleave(function(){
\t $('#intro').fadeTo('slow',0.67,function(){
\t $("#intro").removeClass().addClass("intro-back2"); //attempting to target bg \t
\t });
\t });<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
\t <head>
\t \t <title>Test</title>
<style type="text/css">
\t \t \t .intro-back1{
\t \t \t \t background: url("http://www.bhagesh.com/images/portfolio-nature-small.jpg");
\t \t \t }
\t \t \t .intro-back2{
\t \t \t \t background: url("http://images.all-free-download.com/images/graphicthumb/zwergmanguste_nager_rodent_227139.jpg");
\t \t \t } \t \t
\t \t \t #intro{
\t \t \t \t width:300px;
\t \t \t \t height:300px; \t
\t \t \t }
</style>
\t </head>
\t <body>
\t \t <div id="intro" class="intro-back1">
\t \t </div>
\t </body>
</html>你可以改變背景當鼠標懸停上 #intro
加
Approach2：
$("html").mouseleave(function(){
\t $('#intro').fadeTo('slow',0.67,function(){
\t $("#intro").removeClass().addClass("intro-back2"); //attempting to target bg \t
\t });
\t });<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
\t <head>
\t \t <title>Test</title>
<style type="text/css">
\t \t \t #opac{
opacity:0.67;
\t \t \t \t width:300px;
position:relative;
\t \t \t \t height:300px;
\t \t \t }
\t \t \t .intro-back1{
\t \t \t \t background: url("http://www.bhagesh.com/images/portfolio-nature-small.jpg");
\t \t \t }
\t \t \t .intro-back2{
\t \t \t \t background: url("http://images.all-free-download.com/images/graphicthumb/zwergmanguste_nager_rodent_227139.jpg");
\t \t \t } \t \t
\t \t \t #intro{
position:absolute;
\t \t \t \t width:300px;
\t \t \t \t height:300px; \t
\t \t \t }
</style>
\t </head>
\t <body>
\t \t <div id="intro" class="intro-back1">
\t \t </div>
\t \t <div id="opac" class="intro-back1">
\t \t </div>
\t </body>
</html>
你可能會有所幫助：HTTP：/ /stackoverflow.com/quest離子/ 3079330/css3-fade-effect – SimianAngel
感謝您的貢獻，但是，這不是我期望實現的目標。我只是想瞄準背景。 – Joel
您對'css（）'的調用只是獲取背景屬性的值。如果你想設置它，請傳遞第二個參數... –