Javascript 当鼠标悬停在链接上时，如何淡入内容？

当鼠标悬停在链接上时，我试图使内容淡入或出现在我的博客上。例如，在我的博客上，如果有人将鼠标悬停在诸如“主页”或“关于”之类的页面链接上，我希望内容显示在他们下方，而不实际单击他们即可到达。这可能吗？我对网页设计有点陌生。谢谢你的帮助里克

像这样的东西怎么样：

$(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

---

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

在不了解您当前意图的情况下（从何处加载，在何处显示），我可以提供一个通用建议，一旦根据您的具体情况进行了定制，就应该满足您的需求：

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

值得注意的是，要使其工作，所有页面都必须位于同一个域上，并且还必须包含

参考资料：

,

,

---

1-您需要在页面中包含

style=“display:none”

的内容，并为其提供唯一的id

2-将jQuery放在头上。类似这样的内容：

3-将事件连接到您的内容：

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

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

---

您将需要一些javascript和AJAX。 我正在使用jQuery库。 这里有一个介绍 您将需要悬停事件：

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

});

以及用于加载页面而无需刷新的AJAX

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


     });

---

最简单的方法是使用，如果这是一个选项的话？是的，这是一个选项。谢谢大家帮助我。我将如何在我的网站上实现jQuery？我已经下载了它。注意：未测试，最初可能无法工作，但不应该花太多时间才能让它工作。这似乎是我正在寻找的，但我如何在我的网站上安装jQuery？只需在网站中添加

，您将从其网站加载jQuery。但是你可以在本地加载它，只需从下载并将下载的文件上传到你网站的目录中，然后添加到你网站的头部