Question

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

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

我的逻辑是：

使用2个锚标记并隐藏1个
隐藏图片包含应在悬停图片上显示的图片。
当用户悬停时，第一个锚标记的背景图像应该被隐藏的锚标记的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();
    }
});

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

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

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

2 个答案: