0

我有下面的代码：第一个函数使用 rel 属性在鼠标悬停时显示替代图像 第二个函数采用隐藏的 div 并在同一页面上的另一个位置显示内容但是当我悬停图像时图像不会改变，隐藏 div 上的悬停有效，但在单击其他位置移动它后，悬停不起作用。我认为这可能是文档准备脚本，因为我在准备好后更改了页面，但我不确定，有什么建议吗？谢谢你

$(document).ready(function(){
$(function() {
    $('img[rel]').hover(function() {
        $(this).attr('tmp', $(this).attr('src')).attr('src', $(this).attr('rel')).attr('rel', $(this).attr('tmp')).removeAttr('tmp');
    }).each(function() {
        $('<img />').attr('src', $(this).attr('rel'));
    });;
});

$(function(){
    $('.id2').one("click",function() {
         var newPara = $('#test').html();
        $('#big_photo').append(newPara);
    }); 
});

});

4

1 回答 1

1

我认为您应该考虑使用精灵进行图像切换，因为在我看来这是一个更优雅的解决方案。

  • 您不需要 rel 属性（无论如何这不是有效的 img 属性）
  • 加载第二张图片没有问题，因为它是一次性加载的

还

$(document).ready(function(){

和

$(function() {

是一样的，你只需要其中一个：

$(function() {
   // all your jQuery code
});

就足够了。

好的，然后在悬停/退出时交换 src 和 rel，这应该可以：

$('img[rel]').bind('mouseenter mouseleave',function() {
    var oldSrc = $(this).attr('src');
    $(this).attr('src', $(this).attr('rel')).attr('rel', oldSrc);
});

演示：http: //jsfiddle.net/P37UX/1/

于 2011-09-28T14:20:31.000 回答