2014-09-12 190 views
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; 
} 

enter image description here

加入

display: block; 

会使链接填写在div宽度,但背景图像将保留左对齐。

enter image description here

改变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是行不通的。

任何洞察赞赏。

+1

小提琴提供的不是你在这里... – imtheman 2014-09-12 22:53:33

+0

如果你改变'display:block'到'display:inline-block'? – DevlshOne 2014-09-12 23:55:06

+0

@ imtheman,感谢您检查小提琴。这与我发布的代码不一样,但它是我开始的地方。在小提琴中,图像源位于HTML中。我在JQ之前加了它。但逻辑不变。 其他建议表示赞赏。 – user2943188 2014-09-13 19:25:56

回答

0

事实证明,这可以直CSS做:

a { 
    display: block; 
} 

a:before { 
    background-image: url("../images/link.png"); 
    content: ""; 
    display: inline-block; 
    height: 22px; 
    width: 24px; 
} 

a:hover:before { 
    background-image: url("../images/hover.png"); 
} 

最后,图像显示为文本的左侧,整个区域是可以点击的,它通过所有响应断点正确响应。

谢谢大家的帮助!