Как добавить контент при наведении на ссылку?

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

Вам понадобится JavaScript и AJAX.Я использую библиотеку jQuery.Вот введение http://www.west -wind.com / presentation / jquery / Вам понадобится событие hover:

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

});

и AJAX для загрузки страницы без обновления.

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


     });

Answer 3

1 - вам нужно иметь контент на странице с style="display:none" и присвоить ему уникальный идентификатор.

2 - включите 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

Не зная больше о ваших текущих намерениях (где загружать, где отображать), я могу предложить общее предложение, которое будет соответствовать вашим потребностям, как только вы будете адаптированы к вашим особенностям:

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

Стоит отметитьчто для того, чтобы это работало, все страницы должны находиться в одном домене, а также включать в себя библиотеку jQuery .

Ссылки:

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