Question

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

但是，当我悬停标签时，如何才能在图像上获得交换？

HTML code：

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

阅读replace和attr上的jQuery文档。

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

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

＆＃13;

$(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);
	});	
});

＆＃13;

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

jQuery悬停链接交换图像

5 个答案: