鼠标悬停/图像交换问题

在这个JSFiddle中，我试图做一个简单的鼠标悬停图像，它改变图像，鼠标关闭，图像变回。但由于某种原因，我在代码中看不到问题。鼠标悬停/图像交换问题

$(document).ready(function(){ 
$('.normalClassName').click(function() { 
$(this).addClass('hoverClassName'); 
}, function() { 
$(this).removeClass('hoverClassName'); 
}); 
});

似乎是一个 “平铺” 问题，在原始图像的瓷砖。查看JSFiddle。

此外，如果任何人都可以告诉我需要添加什么代码，为了获得它，我可以在第二张图片上点击鼠标并在右侧显示另一张图片，以便我可以点击第三张图片去链接。由于

来源

2013-02-04 KGKG

你甚至不需要JavaScript，使用CSS，悬停类，在这里http://www.w3schools.com/cssref/sel_hover.asp – enginefree

请[不要使用w3schools]（http://w3fools.com/）作为参考。相反，请查看[MDN]（https://developer.mozilla.org/en-US/docs/CSS/hover）。 – Ragnarokkr

如果您只需要交换从图像到另一个，你可以这样做：

HTML

<div class="normalClassName"></div>

CSS

.normalClassName { 
    width: 512px; 
    height: 512px; 
    background: transparent url('http://www.applegazette.com/wp-content/uploads/apple-logo.jpg') top left no-repeat; 
} 

.normalClassName:hover { 
    background: transparent url('http://creativebits.org/files/500px-Apple_Computer_Logo.svg_.png') top left no-repeat; 
}

这种方式，当鼠标悬停时背景会从图像切换到另一图像，但请记住使用相同大小的图像。

这里的fiddle来测试。正如你所看到的图像有不同的尺寸和效果是丑陋。

来源

2013-02-04 01:43:31 Ragnarokkr

如果你希望它在mouseover或hover发生，为什么要使用.click()？
.click()没有附加到它的handlerOut。

如果你只需要为你在你的问题状态切换图像（而不是背景）（我忽略了你的代码），那么你可以使用这个：

$(document).ready(function() { 
    $('.normalClassName').hover(function() { 
     $(this).find('img').attr('src', 'http://creativebits.org/files/500px-Apple_Computer_Logo.svg_.png'); 
    }, function() { 
     $(this).find('img').attr('src', 'http://www.applegazette.com/wp-content/uploads/apple-logo.jpg'); 
    }); 
});

这里是link到工作小提琴更新。

来源

2013-02-04 01:46:04 hjpotter92

鼠标悬停/图像交换问题

回答

相关问题