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

Posted 2023-03-06

【中文标题】悬停在链接上时如何淡入内容？

【英文标题】：How to fade in content when hovering over a link?

【发布时间】：2011-07-07 14:17:03

【问题描述】：

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

【问题讨论】：

最简单的方法是使用jQuery library，如果可以的话？

是的，这是一个选项。谢谢大家帮助我。我将如何在我的网站上实现 jQuery？我已经下载了。

【参考方案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。

参考资料：

hover(), load(), empty()。

【参考方案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);
   
 );


     );