[英]How to get the background image url of anchor tag using id
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 : 我的逻辑是:
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获取定位标记的背景图像。
Instead of making multiple elements, use the data-*
attribute. 代替使用多个元素,而使用
data-*
属性。
HTML: HTML:
<a href="#" data-hover="url('image2.jpg')" style="background-image: url('image1.jpg');"> </a>
jQuery: jQuery的:
$('a').hover( function() {
var hoverImg = $(this).data('hover');
var basicImg = $(this).css('background-image');
$(this).data('hover', basicImg ).css('background-image', hoverImg );
});
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'); }
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/ 演示: http : //jsfiddle.net/u93efzb5/
HTML 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 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%;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.