3

我正在尝试创建一种效果，如果您将鼠标悬停在 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 次，它似乎有很多错误，而且不流畅。玩一分钟。有没有更好的方法来解决这个问题？

4

1 回答 1

2

尝试使用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);
});

应该这样做

于 2009-12-03T16:31:55.920 回答