Javascript 为什么我的jQuery悬停函数只适用于一个图像
我正在尝试创建一个jquery函数来更改图像,当我将鼠标悬停在图像上方时,它对第一个图像有效,但对第二个图像无效,我不知道为什么 按钮Javascript 为什么我的jQuery悬停函数只适用于一个图像,javascript,jquery,html,image,jquery-hover,Javascript,Jquery,Html,Image,Jquery Hover,我正在尝试创建一个jquery函数来更改图像,当我将鼠标悬停在图像上方时,它对第一个图像有效,但对第二个图像无效,我不知道为什么 按钮 $(document).ready(function(){ var imgLinkedIn = $('#imgLinkedIn'); var imgGithub = $('#imgGithub'); imgLinkedIn.hover(function() { $(this).attr("src","images/linkedI
$(document).ready(function(){
var imgLinkedIn = $('#imgLinkedIn');
var imgGithub = $('#imgGithub');
imgLinkedIn.hover(function() {
$(this).attr("src","images/linkedIn-hover.png");
}, function() {
$(this).attr("src","images/linkedIn.png");
});
imgGithub.hover(function() {
$(this).attr("src","images/Octocat-hover.png");
}, function() {
$(this).attr("src","images/Octocat.png");
});
});
HTML
<a href="https://uk.linkedin.com/pub/ife-a/27/273/745" title="LinkedIn" id="imgLinkedin" target="_blank">
<img class="imgContactLogos" id="imgLinkedIn" src="images/linkedIn.png" />
</a>
<a href="http://github.com/cinofr3t" title="Github" id="imgGithub" target="_blank">
<img class="imgContactLogos" id="imgGithub" src="images/Octocat.png"/>
</a>
试试这个:
HTML:
<a href="https://uk.linkedin.com/pub/ife-a/27/273/745" title="LinkedIn" target="_blank">
<img class="imgContactLogos" id="imgLinkedIn" src="images/linkedIn.png" />
</a>
<a href="http://github.com/cinofr3t" title="Github" target="_blank">
<img class="imgContactLogos" id="imgGithub" src="images/Octocat.png"/>
</a>
</div>
注意:如果两个图像在页面加载后都出现在DOM中,那么这将起作用。如果动态加载,则必须使用jQuery
.on
方法。可能是imgGithub
的jQuery选择器有问题。代码中如何定义imgGithub
?什么是imgLinkedIn和imgGithub?或者可能是在事件附加后将第二个imgGithub附加到DOM中。。我们可以看到您的HTML代码吗?@AndyKorneyev我已经更新了代码,以显示它们是如何定义的。您在链接和图像上都有相同的id
。为什么这会导致一个工作而另一个不工作?我无法回答,但这肯定是相关的!我不明白这和原始代码有什么不同?!?我看不出这有什么不同。你以前没有提供过的前2行!这些元素是在DOM上存在还是动态加载?在我回答之后,您已经更新了您的问题。这和@ifelabolz是一样的
$('#imgLinkedIn').hover(function () {
$(this).attr("src", "images/linkedIn-hover.png");
}, function () {
$(this).attr("src", "images/linkedIn.png");
});
$('#imgGithub').hover(function () {
$(this).attr("src", "images/Octocat-hover.png");
}, function () {
$(this).attr("src", "images/Octocat.png");
});