如何使用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%; 
}