显示img后jquery悬停功能无法正常工作

时间:2011-09-28 13:58:42

标签: jquery append jquery-hover

我有以下代码: 第一个函数使用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);
    }); 
});

});

1 个答案:

答案 0 :(得分:1)

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

  • 您不需要rel属性(这不是有效的img属性 无论如何)
  • 你加载第二张图片没有问题,因为它是 全部加载

$(document).ready(function(){

$(function() {

是一样的,你只需要其中一个:

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

就足够了。


好的,然后将src转换为hover / out,这应该可行:

$('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/