だから、私は自分の背景を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の3番目の引数は、アニメーションが完了すると呼び出される関数です.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>$("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：/あなたはとき#intro
上マウスオーバープラス
あなたの貢献に感謝しますが、これは私が達成しようとしているものではありません。私は背景をターゲットにしようとしています。 – Joel
'css（）'を呼び出すと、バックグラウンドプロパティの値が取得されます。それを設定したい場合は、2番目の引数を渡してください... –