How to fade in content when hovering over a link?

I'm trying to make content fade in or appear on my blog when the mouse is hovered over a link. For example, on my blog http://www.ricardopomalaza.com/, if someone were to hover their mouse over one of the page links like 'Home' or 'About', I'd like the content to be shown below them without actually clicking them to get there. Is this possible? I'm sort of new in web design. Your help开发者_如何学Go would be appreciated, thank you. - Rick

how about something like:

$(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(){});    
});

of course with this you'd need to have jquery.

this would fade out the content area, load the new content, then fade back in.

Without knowing more about your current intentions (where to load from, where to display) I can offer a generic suggestion that should meet your needs, once tailored to your specifics:

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

It's worth noting that, for this to work, the pages all have to be on the same domain and, also, incorporate the jQuery library.

References:

1. hover(),
2. load(),
3. empty().

1 - you need to have the content in the page with style="display:none" and give it a unique id.

2 - include jQuery on your HEAD. Something like this: <script type="text/javascript" language="javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.3.2.min.js"></script>

3 - hook up events to your content:

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

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

You will need some javascript and AJAX. I'm using the jQuery library. Here's an introduction http://www.west-wind.com/presentations/jquery/ You will need the hover event:

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

});

and the AJAX for loading the page without refreshing.

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


     });