如何使用ID獲取錨點標記的背景圖像url

Question

我想給單個頁面上的多個圖像提供懸停效果。

每個圖像都有單獨的懸停圖像，所以我正在使用動態背景圖像更改。

我的邏輯是：

1. 使用2錨定標記和隱藏1個其中之一
2. 隱藏圖像包含應該顯示在懸停圖像的圖像。
3. 當用戶懸停時，第一個錨標記的背景圖像應該被替換爲隱藏的錨標記的bg圖像。

這裏是我的代碼：

<td class="cell-style-img"> 
    <a href="<?php echo $linkedin; ?>" id="img<?php echo '-'.$founder_count;?>" class="img-circular img_hover" style="background-image: url(<?php echo $src;?>);"/> 
    <a href="<?php echo $linkedin; ?>" class="img-circular" style="display:none;background-image: url(<?php echo $hover_src;?>);" id="hover<?php echo '-'.$founder_count;?>"/> 

    </a> 
    </td> 
$("a.img_hover").bind({ 

    mouseenter: function() { 
     var id = $(this).attr('id'); 
     var id1 = id.replace (/[^\d.]/g, ''); 
     id1 = 'hover-'+(id1); 
     //alert(id1); 
     var bg = $("#"+id1).css('background-image').replace(/^url|[\(\)]/g, ''); 

     bg = bg.replace('url(','').replace(')',''); 
    $("#"+id).css('background-image', bg); 
    }, 
    mouseout: function() { 
     var id = $(this).attr('id'); 
     var id1 = id.replace (/[^\d.]/g, ''); 
     id1 = 'hover-'+(id1); 
      $("#"+id).show(); 
      $("#"+id).show(); 
    } 
}); 

我的問題是，我沒能獲得第2隱藏錨標記的BG-圖像。

如何使用jquery獲取錨標記的背景圖像。

Answer 1

而不是製作多個元素，請使用data-*屬性。

HTML：

<a href="#" data-hover="url('image2.jpg')" style="background-image: url('image1.jpg');">&nbsp;</a> 

的jQuery：

$('a').hover(function() { 
    var hoverImg = $(this).data('hover'); 
    var basicImg = $(this).css('background-image'); 
    $(this).data('hover', basicImg).css('background-image', hoverImg); 
}); 

DEMO

也許我看着它容易，但爲什麼不爲它使用CSS（因爲你已經在圖像上使用了ID）：

a#imgId { 
    background-image: url('image1.jpg'); 
} 
a#imgId:hover { 
    background-image: url('image2.jpg'); 
} 

DEMO

Answer 2

我覺得這個方法的方式，對於這樣一個簡單的問題太複雜。嘗試一些更簡單的方法，比如讓CSS完成繁重任務。

這顯然不適合你的場景開箱即用（因爲我看不出你到底在做什麼），但它應該導致正確的（或至少更容易的）路徑。

Demo: http://jsfiddle.net/u93efzb5/

HTML

<a href="#" class="reveal" style="background-image: url(http://lorempixel.com/output/technics-q-g-256-256-5.jpg);"> 
    <span style="background-image: url(http://lorempixel.com/output/food-q-c-256-256-9.jpg);" /> 
</a> 

CSS

a.reveal { 
    display: block; 
    height: 256px; width: 256px; 
    position: relative; 
} 
a.reveal span { 
    display: none; 
    background-repeat: no-repeat; 
    position: absolute; 
} 

a.reveal:hover span { 
    display: block; 
    left: 0; top: 0; 
    height: 100%; width: 100%; 
}