Question

在这个JSFiddle中，我正在尝试对图像进行简单的鼠标悬停，它会更改图像，鼠标关闭，图像会变回。但由于某种原因，我没有在代码中看到问题。

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

原始图像拼贴似乎存在“平铺”问题。参见JSFiddle。

此外，如果有人能告诉我我需要添加哪些代码，那么我可以在第二张图像上点击鼠标然后在右边的另一张图片中显示我可以点击第三张图片去的地方到链接。感谢

Answer 1

如果您希望它发生在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到工作小提琴更新。

Answer 2

如果您只需要从图像切换到另一个图像，则可以执行以下操作：

<强> 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。如您所见，图像大小不同，效果丑陋。

鼠标悬停/图像交换的问题

2 个答案: