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

您可以使用简单的CSS规则来实现这一目标。

＆＃13;

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')
 }

＆＃13;

<div>Something</div>

＆＃13;

但是如果你还想使用jQuery。使用original

将.data()图片保留在缓存中

＆＃13;

$("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)
});

＆＃13;

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

＆＃13;

Answer 2

将原始背景保存为自定义数据属性，并根据第二个回调函数中的数据属性值进行更新。

＆＃13;

$("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'))
});

＆＃13;

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

＆＃13;

仅供参考：因为:hover pseudo-class有选项，所以使用css总是更好。

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

您可以尝试以下方法：

我们可以将原始背景图片放入$.data，然后再在hover更改hoverout，我们可以再次阅读：

＆＃13;

$("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)
});

＆＃13;

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

＆＃13;

JQuery如何获得内联样式值

4 个答案: