悬停在链接上时如何淡入内容？答案

【问题标题】：How to fade in content when hovering over a link?悬停在链接上时如何淡入内容？
【发布时间】：2011-07-07 14:17:03
【问题描述】：

当鼠标悬停在链接上时，我正在尝试使内容淡入或出现在我的博客上。例如，在我的博客http://www.ricardopomalaza.com/ 上，如果有人将鼠标悬停在“主页”或“关于”等页面链接之一上，我希望内容显示在它们下方，而无需实际单击它们即可到达那里.这可能吗？我是网页设计方面的新手。您的帮助将不胜感激，谢谢。 - 瑞克

【问题讨论】：

最简单的方法是使用jQuery library，如果可以的话？
是的，这是一个选项。谢谢大家帮助我。我将如何在我的网站上实现 jQuery？我已经下载了。

标签： javascript css navigation hover fade

【解决方案1】：

怎么样：

$(document).ready(function()
{
    $(".navigation a").hover(function()
    {
        var href=$(this).attr("href");
        $("#content").fadeOut("fast", function()
        {
            $("#content").empty();
            $("#content").load(href+" #content", function()
            {
                $("#content").fadeIn("fast");
            });
        });            
    },
    function(){});    
});

当然，你需要有 jquery。

这将淡出内容区域，加载新内容，然后淡入。

【讨论】：

注意：未经测试，最初可能无法正常工作，但不会花费太多时间。
这似乎是我正在寻找的，但是如何在我的网站上安装 jQuery？
只需在站点的中添加 <script src="http://code.jquery.com/jquery-1.5.min.js"></script> 您将从其站点加载 jQuery。但是你可以在本地加载它，只需从jquery.com下载它并将下载的文件上传到你网站的目录中。然后只需添加到您网站的头部

【解决方案2】：

在不了解您当前意图的更多信息（从哪里加载，从哪里显示）的情况下，我可以根据您的具体情况提供一个应该满足您需求的通用建议：

$('a').hover(
    function(){
        var href = this.href;
        $('#divToShowStuffIn').load(href + ' #divToLoadFrom');
    },
    function() {
        $('#divToShowStuffIn').empty();
    });

值得注意的是，要使其正常工作，所有页面都必须位于同一域中，并且还必须包含 jQuery library。

参考资料：

【讨论】：

【解决方案3】：

1 - 您需要在页面中包含style="display:none" 的内容并为其指定一个唯一的ID。

2 - 在你的 HEAD 中包含 jQuery。像这样：<script type="text/javascript" language="javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.3.2.min.js"></script>

3 - 将事件与您的内容挂钩：

$(document).ready(function() { init() })

function init() {
    $("#myDiv").hover(
      function () {
        $("#targetDIV").stop();
        $("#targetDIV").fadeIn('slow');
      }, 
      function () {
        $("#targetDIV").stop();
        $("#targetDIV").fadeOut('slow');
      }
    );
}

【讨论】：

【解决方案4】：

您将需要一些 javascript 和 AJAX。我正在使用 jQuery 库。这里有介绍http://www.west-wind.com/presentations/jquery/ 您将需要悬停事件：

$("a").hover(function() {

});

以及用于加载页面而不刷新的 AJAX。

     $("a").hover(function() {
     var href=$(this).attr("href");
     $.ajax({
   type: "POST",
   url: href,
   success: function(msg){
     $("body").html(msg);
   }
 });


     });

【讨论】：