1

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

http://jsfiddle.net/gmULU/2/

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

原始图像平铺的地方似乎存在“平铺”问题。请参阅 JSFiddle。

另外，如果有人能告诉我我需要添加什么代码，那么我可以在第二个图像上单击鼠标，然后在右侧出现另一个图像，我可以在其中单击第三个图像以转到链接. 谢谢

4

2 回答 2

1
  1. 如果您希望它发生在mouseoveror hover，为什么要使用.click()？
  2. .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' );
    });
});

这是工作小提琴更新的链接。

于 2013-02-04T01:46:04.937 回答
0

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

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;
}

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

这里要测试的小提琴。正如你所看到的图像有不同的大小，效果是丑陋的。

于 2013-02-04T01:43:31.273 回答