jquery - jQuery悬停链接交换图像

Question

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

但是，当我悬停 a 标签时，如何在图像上获取交换内容？

HTML 代码：

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

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

Answer 1

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

阅读 jQuery 文档replace和attr.

Answer 2

改变src你的形象只是attr：

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

您需要使用悬停：

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

Answer 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 将原始图像放回原处。

Answer 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);
	});	
});

Answer 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" />