Question

我想将我的第一张背景图片淡入一个应该在悬停时使用的图像，然后在用户移除鼠标后再将其关闭。可以使用jQuery。

这是我到目前为止所做的：

    <ul style="top: -70px; display: block; padding-left: 205px;" id="cats-menu" class="nav superfish sf-js-enabled">
    <a href="http://www.ballpointtech.com/category/guides/"></a><li id="li_guides" onclick="window.location = 'http://www.ballpointtech.com/category/guides/';"><a href="http://www.ballpointtech.com/category/guides/"> </a></li>

    <a href="http://www.ballpointtech.com/category/news/"></a><li id="li_news" onclick="window.location = 'http://www.ballpointtech.com/category/news/';"><a href="http://www.ballpointtech.com/category/news/"> </a></li>
    <a href="http://www.ballpointtech.com/category/reviews/"></a><li id="li_reviews" onclick="window.location = 'http://www.ballpointtech.com/category/reviews/';"><a href="http://www.ballpointtech.com/category/reviews/"> </a></li>
    <a href="http://www.ballpointtech.com/category/tipstricks/"></a><li id="li_tipstricks" onclick="window.location = 'http://www.ballpointtech.com/category/tipstricks/';"><a href="http://www.ballpointtech.com/category/tipstricks/"> </a></li>
</ul>

    <style type="text/css">
    #li_guides {
        background-image:url('http://www.ballpointtech.com/wp-content/uploads/2010/09/Guides-Still1.png');
        width:130px;
        height:92px;    
}
    #li_guides:hover {
        background-image:url('http://www.ballpointtech.com/wp-content/uploads/2010/09/Guides-Rollover1.png');
    }
#li_guides:active {
        background-image:url('http://www.ballpointtech.com/wp-content/uploads/2010/09/Guides-Click2.png');
    }
#li_reviews {
        background-image:url('http://www.ballpointtech.com/wp-content/uploads/2010/09/Reviews-Still.png');
        width:130px;
        height:92px;    
}
    #li_reviews:hover {
        background-image:url('http://www.ballpointtech.com/wp-content/uploads/2010/09/Reviews-Rollover.png');
    }
#li_reviews:active {
        background-image:url('http://www.ballpointtech.com/wp-content/uploads/2010/09/Reviews-Click.png');
    }
#li_news {
        background-image:url('http://www.ballpointtech.com/wp-content/uploads/2010/09/News-Still.png');
        width:130px;
        height:92px;    
}
    #li_news:hover {
        background-image:url('http://www.ballpointtech.com/wp-content/uploads/2010/09/News-Rollover.png');
    }
#li_news:active {
        background-image:url('http://www.ballpointtech.com/wp-content/uploads/2010/09/News-Click.png');
    }
#li_tipstricks {
        background-image:url('http://www.ballpointtech.com/wp-content/uploads/2010/09/tipstricks-still.png');
        width:130px;
        height:92px;    
}
    #li_tipstricks:hover {
        background-image:url('http://www.ballpointtech.com/wp-content/uploads/2010/09/tipstricks-rollover.png');
        }
    #li_tipstricks:active {
        background-image:url('http://www.ballpointtech.com/wp-content/uploads/2010/09/tipstricks-click.png');
    }
</style>

唉，无法正确格式化......

Answer 1

Here's a good start I put together in jsbin。我把新闻图标作为演示连接起来。它不是防弹的，因为在转换完成之前离开元素会使元素处于错误的状态，但我不知道如何解决这个问题。对于这项工作，jquery可能有比fadeOut/fadeIn更好的方法。此外，您还需要制作:active背景! important，以便在点击时图片始终可见，我在保存之前忘了这样做。

您也不能在<a>元素之外悬挂<li>个元素。建立链接display:block，这样他们就可以占用列表项中的空白区域，然后你就可以破坏那些hacky onclick="window.location..."。

Answer 2

@hunter

这忽略了褪色的欲望。

$('your.item').mouseenter(function(){
     $('your.item').stop().animate({opacity: 0},200,function(){

          $('your.item').attr('src','/new/image.jpg');
          $('your.item').stop().animate({opacity: 1},200);
    }
    });




  });

这或多或少给出了全局。没有测试或证明。如果你试一试，把它放在jfiddle，我会帮助你完成它。你还需要制作一个.mouseleave()函数

从背景图像渐变到悬停

2 个答案: