如何在鏈接上懸停時淡入內容？

當鼠標懸停在鏈接上時，我試圖使內容淡入或出現在我的博客上。例如，在我的博客http://www.ricardopomalaza.com/上，如果有人將鼠標懸停在「首頁」或「關於」之類的頁面鏈接之一上，我希望將內容顯示在其下方，而無需實際點擊它們即可到達目的地。這可能嗎？我在網頁設計方面有點新鮮。感謝您的幫助，謝謝。 - 裏克如何在鏈接上懸停時淡入內容？

來源

2011-03-02 Rick

*最簡單*的方法是使用[jQuery庫]（http://www.jquery.com/），如果這是一個選項？ – 2011-03-02 21:00:45

是的，這是一個選項。謝謝大家幫助我。我將如何去在我的網站上實現jQuery？我已經下載了它。 – Rick 2011-03-02 22:07:16

怎麼是這樣的：

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

這將淡出內容區域，加載新的內容，然後漸回。

來源

2011-03-02 20:58:29

注意：未經測試，最初可能無法正常工作，但不應該花太多時間才能正常工作。 – 2011-03-02 21:06:36

這似乎是我正在尋找，但我如何在我的網站上安裝jQuery？ – Rick 2011-03-02 22:13:07

只需在您的站點的中添加 '' 您將從其站點加載jQuery。但是你可以在本地加載它，只需從http://jquery.com/下載它並將下載的文件上傳到你的網站的目錄中。然後只需添加** **到您的網站的頭 – lam3r4370 2011-03-02 22:51:49

不知道更多關於你的當前意向（從哪裏加載，其中顯示）我可以提供一個通用的建議，應該滿足您的需求，一旦爲您量身定製的細節：

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

值得一提的是，對於這個工作，頁面都必須是在同一個域，並且還納入jQuery library。

參考文獻：

來源

2011-03-02 20:58:40

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

來源

2011-03-02 21:00:18

您將需要一些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); 
    } 
}); 


    });

來源

2011-03-02 21:02:21 lam3r4370

謝謝！我會得到jQuery。 – Rick 2011-03-02 22:13:33

如何在鏈接上懸停時淡入內容？

回答

相關問題