如何使用id获取锚标记的背景图像URL

I want to give hover effect to multiple images on single page.

我想在单页上为多个图像提供悬停效果。

There is separate hover image for each image so I am using dynamic background image change.

每个图像都有单独的悬停图像,因此我使用动态背景图像更改。

My logic is :

我的逻辑是:

use 2 anchor tag and hide 1 one them

使用2个锚标签并隐藏1个它们

hidden image contains the image which should shown on hover image.

隐藏图像包含应在悬停图像上显示的图像。

When user hovers, first anchor tag's background image should be get replaced with hidden anchor tag's bg-image.

当用户悬停时,第一个锚标签的背景图像应该被隐藏的锚标签的bg-image替换。

here is my code :

这是我的代码:

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

My Problem is that I am not able to get second hidden anchor tag's bg-image.

我的问题是我无法获得第二个隐藏锚标记的bg图像。

How I can get the background-image of anchor tag using jquery.

如何使用jquery获取锚标记的背景图像。

2 个解决方案

#1

Instead of making multiple elements, use the data-* attribute.

不要使用多个元素,而是使用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

~~Maybe I'm looking at it to easy, but why not use CSS for it (since you already use id's on the images):~~

也许我看起来很容易,但为什么不使用CSS(因为你已经在图像上使用了id):

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

~~DEMO~~

#2

I think this approach is way too complex for such a simple problem. Try something simpler, like letting CSS do the heavy-lifting.

我认为这种方法对于这样一个简单的问题来说太复杂了。尝试更简单的东西,比如让CSS做繁重的工作。

This obviously won't fit your scenario out-of-the-box (because I can't see exactly what it is you're doing), but it should lead down the right (or at least easier) path.

这显然不适合你的场景(因为我无法确切地看到你正在做什么),但它应该导致正确(或至少更容易)的路径。

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%;
}

#1