jquery悬停功能在显示img后不起作用

发布于 2024-12-07 00:07:13 字数 682 浏览 0 评论 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);
    }); 
});

}）;

原文

i have the code below:
the first function shows an alternative image on mouse over using the rel atribute
the second function takes a hidden div and shows the content in another place on the same page but when i hover the image the image doesn't change, the hover on the hidden div works, but after moving it on click in other place the hover doesn't work. I think it might be the document ready script because i alter the page after ready but i'm not sure, any advise? thank you

$(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);
    }); 
});

});

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

望笑 2024-12-14 00:07:13

我认为你应该考虑使用 sprites 进行图像切换，因为它更方便我认为优雅的解决方案。

您不需要 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);
});

demo: http://jsfiddle.net /P37UX/1/

i think you should consider using sprites for the image switching, since it's a more elegant solution in my opinion.

you don't need the rel attribute (which isn't a valid img attribute
anyway)
you don't have problems loading the second image since it's
all loaded at once

also

$(document).ready(function(){

and

$(function() {

is the same and you only need one of them so:

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

would suffice.

ok, then for swapping src an rel on hover / out, this should work:

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

demo: http://jsfiddle.net/P37UX/1/

回复收藏 0 原文

~没有更多了~