jQuery悬停链接交换图像答案

【问题标题】：jQuery hover a link swap imagejQuery悬停链接交换图像
【发布时间】：2013-02-27 15:59:12
【问题描述】：

如果用户将鼠标悬停在链接上，图像将与末尾带有“-on”的图像交换，我想执行以下操作。

但是当我将鼠标悬停在 a 标签上时，如何在图像上获得交换的东西？

HTML 代码：

<div>
    <a href="#">
        <img src="image.jpg" alt="" />
        Here some caption
    </a>
</div>

我无法将图片网址放在标题中...

【问题讨论】：

我尝试了 jQuery 插件 'canvasSwap' 并使用 $('a.swap:hover img').canvasSwap(); 触发它但这没有用......其他一些插件也是如此。
你试过只使用 CSS 吗？

标签： jquery image swap

【解决方案1】：

$(function () {
    $('a img').hover( function () {
        $(this).attr('src', $(this).attr('src').replace(/\.jpg/, '-on.jpg') );
    });
});

阅读 replace 和 attr 上的 jQuery 文档。

【讨论】：

这将与 CanvasSwap 插件相同。它仅在您将图像悬停时才有效......而不是在您悬停整个 div 时！
这也是一个很好的解决方案，只需将 $('a img') 更改为 $('div')，并将 $(this) 更改为 $(this).find('a img' )
这很好，但如果您多次悬停，它会将 imagename-on.jpg 替换为 imagename-on-on.jpg 等等。为避免找不到图像，请为 hover() 添加 jquery out 处理程序。阅读文档..api.jquery.com/hover

【解决方案2】：

要更改您的图像的src，只需attr：

$('img').attr("src", "image2.jpg");

你需要使用hover:

$("a").hover(
function() {
    $(this).find('img').attr("src", "image2.jpg");
},
function() {
    $(this).find('img').attr("src", "image.jpg");
}
);

【讨论】：

$('a:hover img').attr("src", "-on.jpg");当你这样做时，我认为你不会在悬停时获得 image-on.jpg...

【解决方案3】：

您可以在 a 标签上使用 DOM 'mouseover' 事件并为其附加回调（然后在内部，您将更改图像的 URL）

编辑，示例代码：

<div>
<a id="myLink" href="#">
    <img id="myImg" src="image.jpg" alt="" />
    Here some caption
</a>
</div>

在 JS 中：

var img = document.getElementById('myImg');
document.getElementById('myLink').onmouseover = function(){
    //manipulate the image source here.
    img.src = img.src.replace(/\.jpg/, '-on.jpg');
}

然后您需要使用 onmouseout 将原始图像放回原处。

【讨论】：

嗨，格雷格，请参阅我在主题开始底部的最后一行：我无法将图像网址放在 html 的标题中...
注意这是 JS 代码，它不必在 HTML 的标题中 :) 但我明白你的意思 - 你不能硬编码 URL。
几乎！ :-)...鼠标悬停现在很好，但是当您离开光标时，“正常”图像不会回来？是否可以通过课程来做到这一点？
看我帖子的结尾：你必须用onmouseout做反向操作。据我所知，CSS 类不能修改图像 URL，只能完全替换它。
是的，你现在就是这样，效果很好！你读过另一个问题吗？是否可以通过班级来完成？所以我可以在多个盒子上做吗？

【解决方案4】：

$(document).ready(function($) {
	$('img').on('mouseover', function(){
		src = $(this).attr('src').replace('.gif', '-hover.gif');
		$(this).attr('src', src);
	})
	$('img').on('mouseout', function(){
		src = $(this).attr('src').replace('-hover.gif', '.gif');
		$(this).attr('src', src);
	});	
});

【讨论】：

你运行的代码 sn-p 功能会很整洁......如果代码真的有效的话。

【解决方案5】：

这是一种在鼠标离开时让图像恢复到原始状态的方法。

    $(document).ready(function($) {
    	$('img').on('mouseover', function(){
    		src = $(this).attr('src').replace('hover', 'thanks!');
    		$(this).attr('src', src);
    	})
    	$('img').on('mouseout', function(){
    		src = $(this).attr('src').replace('thanks!', 'hover');
    		$(this).attr('src', src);
    	});	
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<img src="http://placeholder.pics/svg/500x150/DEDEDE/555555/hover" />

【讨论】：