jquery mouseover 的更好方法？

Posted 2023-05-08

【中文标题】jquery mouseover 的更好方法？

【英文标题】：better way of jquery mouseover?

【发布时间】：2010-12-22 21:40:59

【问题描述】：

我正在尝试创建一种效果，如果您将鼠标悬停在 img 上，则其下方的文本颜色会发生变化。而且，当您鼠标移出时，颜色会变回原来的颜色。页面为：http://vitaminjdesign.com/work.html

我的代码是：

    if(window.jQuery)jQuery(function()

        (function() jQuery('div#one img').bind('mouseover', function(event, ui)var target = jQuery('div#one h2'); target.animate('color':'#111111',250,'linear'));)();

    );

我在一页中重复了大约 15 次，它似乎有很多错误，而且不流畅。玩一分钟。有没有更好的方法来解决这个问题？

【参考方案1】：

尝试使用hover，好处是您可以在同一个函数中指定mousein 和mouseout 事件。如果您在具体如何将您所拥有的内容应用于悬停事件方面需要任何帮助，请发表评论，我会看看我能做什么。

编辑：

好的，你网站上的代码已经有了这个

//On mouse over those thumbnail
$('.zitem').hover(function() 

    //Set the width and height according to the zoom percentage
    width = $('.zitem').width() * zoom;
    height = $('.zitem').height() * zoom;

    //Move and zoom the image
    $(this).find('a img').stop(false,true).animate('width':width, 'height':height, 'top':move, 'left':move, duration:200);

    //Display the caption
    $(this).find('div.caption').stop(false,true).fadeIn(200);
,
function() 
    //Reset the image
    $(this).find('a img').stop(false,true).animate('width':$('.zitem').width(), 'height':$('.zitem').height(), 'top':'0', 'left':'0', duration:100);    

    //Hide the caption
    $(this).find('div.caption').stop(false,true).fadeOut(200);
);

我将在这段代码中添加两行来做你想做的事情

//On mouse over those thumbnail
$('.zitem').hover(function() 

    //Set the width and height according to the zoom percentage
    width = $('.zitem').width() * zoom;
    height = $('.zitem').height() * zoom;

    //Move and zoom the image
    $(this).find('a img').stop(false,true).animate('width':width, 'height':height, 'top':move, 'left':move, duration:200);

    //Change the header colour
    $(this).siblings('h2').animate('color':'#111111',250,'linear');

    //Display the caption
    $(this).find('div.caption').stop(false,true).fadeIn(200);
,
function() 
    //Reset the image
    $(this).find('a img').stop(false,true).animate('width':$('.zitem').width(), 'height':$('.zitem').height(), 'top':'0', 'left':'0', duration:100);    

    //Change the header colour back
    $(this).siblings('h2').animate('color':'#EE4E07',250,'linear');

    //Hide the caption
    $(this).find('div.caption').stop(false,true).fadeOut(200);
);

应该这样做

【讨论】：

是的，谢谢，我认为你可以做到。我确实需要帮助，认为您可以生成代码行并且我可以复制它？非常感谢

好的。我还要做一些其他的事情来修复它。完成后我会在大约 5 分钟后发布它