0
我有一个背景图像的链接。这是中心对齐,图像将需要改变悬停。链接是跨越背景容器的100%。该网站是响应和这个容器将改变大小。jQuery prepend悬停鼠标悬停交换
标记是直截了当:
<div class="div_class">
<span class="span_class">
<a class="link_class" rel="nofollow" title="title." href="/node/1">Dispaly Text</a>
</span>
</div>
通常我会简单地使用的CSS。然而,在这种情况下,链接不会填补div的宽度:
.link a {
background-image: url("image.png");
background-position: left center;
background-repeat: no-repeat;
padding-left:30px;
}
加入
display: block;
会使链接填写在div宽度,但背景图像将保留左对齐。
改变background-position
将移动图像,但在可变宽度的环境,我不能确定如何将它锚定到文本的左侧。
使用http://jsfiddle.net/LmVRZ/2/我能够达到链接跨越100%的位置,图像固定在文本的左侧,并且翻转图像,将交换图像:但是,我希望翻转功能,只要用户关注div,而不仅仅是图像。
$(".div-class .span-class a").prepend('<img data-alt-src="hover.png" src="image.png" />');
var sourceSwap = function() {
var $this = $(this);
var newSource = $this.data('alt-src');
$this.data('alt-src', $this.attr('src'));
$this.attr('src', newSource);
}
$(function() {
$('img').hover(sourceSwap, sourceSwap);
});
很明显,我错误地定位图像。但用.div-class,.span-class或者第二个函数替换img是行不通的。
任何洞察赞赏。
小提琴提供的不是你在这里... – imtheman 2014-09-12 22:53:33
如果你改变'display:block'到'display:inline-block'? – DevlshOne 2014-09-12 23:55:06
@ imtheman,感谢您检查小提琴。这与我发布的代码不一样,但它是我开始的地方。在小提琴中,图像源位于HTML中。我在JQ之前加了它。但逻辑不变。 其他建议表示赞赏。 – user2943188 2014-09-13 19:25:56