Question

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

Answer 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。

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

Answer 2

在不了解您当前的意图（从哪里加载，在哪里展示）的情况下，我可以根据您的具体情况提供符合您需求的通用建议：

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

值得注意的是，为了实现这一点，所有页面都必须位于同一个域中，并且还包含jQuery library。

参考文献：

Answer 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');
      }
    );
}

Answer 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);
   }
 });


     });

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

4 个答案: