jQuery prepend悬停鼠标悬停交换

Question

我有一个背景图片的链接。它是居中对齐的，图像需要在悬停时更改。该链接将跨越100％的背景容器。该网站是响应式的，此容器将改变大小。

标记很简单：

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

有任何见解。

Answer 1

事实证明，这可以通过直接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");
}

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

感谢大家的帮助！