jQuery悬停链接交换图像

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

但是我怎样才能得到图像上的交换事物，当我悬停标签？

HTML代码：

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

我不能把图像的URL在头...

来源

2013-02-27 Maanstraat

我已经tryed的jQuery插件 'canvasSwap' 与$的触发它（ 'a.swap：悬停IMG'）canvasSwap（）。但没有工作...一些其他插件相同。 – Maanstraat 2013-02-27 16:02:39

你试过用CSS吗？ – ClosDesign 2013-02-27 16:31:09

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

阅读replace和attr jQuery的文档。

来源

2013-02-27 16:10:55 hjpotter92

这将和CanvasSwap插件一样。只有当你将图像悬停在自己身上时，它才起作用......当你将整个div悬停时，它不会起作用！ – Maanstraat 2013-02-27 16:14:31

这也是一个很好的解决方案，只需将$（'a img'）更改为$（'div'），并将$（this）更改为$（this）.find（'img'） – Greg 2013-02-27 16:20:27

这很好，但如果您不止一次悬停，它会将imagename-on.jpg替换为imagename-on-on.jpg等。为避免找不到图像，请为hover（）添加jquery输出处理程序。阅读文档..http：//api.jquery.com/hover/ – Zec 2013-11-21 12:37:30

要改变你的形象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"); 
} 
);

来源

2013-02-27 16:04:06 Eli

$（'a：hover img'）。attr（“src”，“-on.jpg”）;当你这样做，你不会得到image-on.jpg上的悬停我认为... – Maanstraat 2013-02-27 16:09:24

你不能这样做，看我的编辑:) – Eli 2013-02-27 16:12:19

您可以在标签使用DOM“鼠标悬停”事件并附加一个回调到它（当时里面，你会改变图像的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把原始图像回来。

来源

2013-02-27 16:07:05 Greg

嗨格雷格，看到我的最后一行在主题的底部开始：我不能将图片网址放在html的标题中... – Maanstraat 2013-02-27 16:16:56

用Dream Eater的正则表达式编辑 – Greg 2013-02-27 16:22:15

请注意，这是JS代码，这不一定要在HTML的头部:)但我明白你的意思 - 您无法对网址进行硬编码。 – Greg 2013-02-27 16:28:49

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

来源

2015-01-25 05:10:08 npixels

您运行代码片段功能将非常简洁...如果代码实际工作。 – nocarrier 2015-08-22 20:24:40

jQuery悬停链接交换图像

回答

相关问题