JQueryインラインスタイルの値を取得する方法

Question

ホバーイメージを作成しようとしていますが、元のインラインCSSのバックグラウンド値が返される方法を教えてください。

<div style="background-image: url(orig.jpg)" data-alt-bg="orig_hover.jpg"> 

$("div[data-alt-bg]").hover(function() { 
    var backgroundnew = "url('" + $(this).attr('data-alt-bg') + "')"; 
    $(this).css('background-image', backgroundnew) 
}, function() { 
    var backgroundOrig = XXX??????????XXXXXX?????????? 
    $(this).css('background-image', backgroundOrig) 
}); 

Answer 1

保存データに基づいてカスタムデータ属性や更新などの元の背景属性2番目のコールバック関数の値を使用して、キャッシュ内のoriginal画像を持続。

---

$("div[data-alt-bg]").hover(function() { 
 
    $(this).data('bg', $(this).css('background-image')); 
 
    var backgroundnew = "url('" + $(this).attr('data-alt-bg') + "')"; 
 
    $(this).css('background-image', backgroundnew) 
 
}, function() { 
 
    $(this).css('background-image', $(this).data('bg')) 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div style="background-image: url(orig.jpg)" data-alt-bg="orig_hover.jpg">hi</div>

FYI：は常にそれが :hover pseudo-classとオプションがあるので、CSSを使用することをお勧めします。

Answer 2

これは単純なCSSルールを使用して達成できます。

div { 
 
    background-image: url('orig.jpg') 
 
} 
 
div:hover { 
 
    background-image: url('https://fbcdn-profile-a.akamaihd.net/hprofile-ak-xpf1/v/t1.0-1/p200x200/11182094_10153030955874652_1696866992468729401_n.jpg?oh=ba799406635ee2de0f20e497826076e6&oe=57D55DF6&__gda__=1472963214_d7a1f64437e4e3b7fa6cef8520d091d3') 
 
}

<div>Something</div>

しかしそれでもjQueryのを使用したい場合。 .data()

$("div[data-alt-bg]").hover(function() { 
 
    var backgroundnew = "url('" + $(this).attr('data-alt-bg') + "')"; 
 
    //Persisit original in cache 
 
    var orig = $(this).css('background-image'); 
 

 
    $(this).data('orig', orig).css('background-image', backgroundnew) 
 
}, function() { 
 
    //Read data from cache 
 
    var backgroundOrig = $(this).data('orig'); 
 

 
    $(this).css('background-image', backgroundOrig) 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div style="background-image: url(orig.jpg)" data-alt-bg="orig_hover.jpg">something</div>

Answer 3

使用$(this).data("alt-bg");

$("div[data-alt-bg]").hover(function() { 
    var backgroundnew = "url('" + $(this).attr('data-alt-bg') + "')"; 
    $(this).css('background-image', backgroundnew) 
}, function() { 
    var backgroundOrig = $(this).data("alt-bg"); // use data 
    $(this).css('background-image', backgroundOrig) 
}); 

Answer 4

あなたがアプローチを以下試すことができます。

我々はhoverにそれを変更する前に$.dataに元の背景画像を置くことができますし、hoveroutに、我々は再びそれを読むことができます：

$("div[data-alt-bg]").hover(function() { 
 
    var backgroundnew = "url('" + $(this).attr('data-alt-bg') + "')"; 
 
    var oldBackground = $(this).css('background-image'); 
 
    $(this).data("originalBackground",oldBackground); 
 
    $(this).css('background-image', backgroundnew) 
 
}, function() { 
 
    var backgroundOrig = $(this).data("originalBackground"); 
 
    
 
    console.log(backgroundOrig); 
 
    
 
    $(this).css('background-image', backgroundOrig) 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<div style="background-image: url(orig.jpg)" data-alt-bg="orig_hover.jpg">Hello</div>