为什么我的 jQuery 悬停功能只适用于一张图片
Why does my jQuery hover function only works for one image
我正在尝试创建一个 jquery 函数来在我将鼠标悬停在图像上时更改图像,它适用于第一张图像但不适用于第二张图像,我不确定为什么。
按钮
$(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>
JS
$('#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");
});
注意:如果页面加载后两个图像都存在于 DOM 中,这将起作用。如果你动态加载它,那么你必须使用 jQuery .on
方法。
我正在尝试创建一个 jquery 函数来在我将鼠标悬停在图像上时更改图像,它适用于第一张图像但不适用于第二张图像,我不确定为什么。
按钮
$(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>
JS
$('#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");
});
注意:如果页面加载后两个图像都存在于 DOM 中,这将起作用。如果你动态加载它,那么你必须使用 jQuery .on
方法。