jQuery预先悬停鼠标悬停交换答案

【问题标题】：jQuery prepend hover mouseover swapjQuery预先悬停鼠标悬停交换
【发布时间】：2014-09-12 22:43:44
【问题描述】：

我有一个带有背景图片的链接。它居中对齐，图像需要在悬停时更改。该链接将跨越 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 甚至 a 替换 img 是行不通的。

任何见解都值得赞赏。

【问题讨论】：

提供的小提琴不是你这里的......
如果您将 display:block 更改为 display:inline-block？
@imtheman，感谢您查看小提琴。它与我发布的代码不同，但它是我开始的地方。在小提琴中，图像源位于 HTML 中。我在它前面加上了 JQ。但逻辑保持不变。其他建议表示赞赏。
@DevlshOne，感谢您的评论。将显示更改为 inline-block 并不能解决问题。在声明宽度之前，链接不会跨越父级。发生这种情况时，图像将左对齐。其他建议表示赞赏。
你能在整个事情上加上一个包装器并在那里使用display:block吗？

标签： jquery

【解决方案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");
}

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

感谢大家的帮助！

【讨论】：