jQuery prepend懸停鼠標懸停交換

我有一個背景圖像的鏈接。這是中心對齊，圖像將需要改變懸停。鏈接是跨越背景容器的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是行不通的。

任何洞察讚賞。

來源

2014-09-12 user2943188

小提琴提供的不是你在這裏... – 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

事實證明，這可以直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"); 
}

最後，圖像顯示爲文本的左側，整個區域是可以點擊的，它通過所有響應斷點正確響應。

謝謝大家的幫助！

來源

2014-09-13 20:45:07 user2943188

jQuery prepend懸停鼠標懸停交換

回答

相關問題