Вот. Стили объяснять не буду, с ними и так понятно:
Код CSS

<style>
        .link_test
        {
          position:relative;
            }
        
        .title
        {
          display:none; height:100px; width:200px; background:#fffed2; border:1px solid #838231; padding:5px; position:absolute;
          margin-left:120px; top:5px; z-index:100;
            }
        .index
        {
          position:absolute; height:5px; width:10px; background:red; left:-5px;
            }
    </style>

Вот HTML код ссылок и блоков с текстом (можно вставить картинку):
Код HTML5

<a href="" title="#title_for_first_link" class="link_test">Наведите мышку</a><br />
    <a href="" title="#title_for_two_link" class="link_test">Наведите мышку</a><br />
    <a href="" title="#title_for_three_link" class="link_test">Наведите мышку</a>
    
    <div id="title_for_first_link" class="title">
        <div class="index"></div>
        Тут какой-нибудь HTML код для первой ссылки
    </div>
    
    <div id="title_for_two_link" class="title">
        <div class="index"></div>
        Тут какой-нибудь HTML код для второй ссылки
    </div>
    <div id="title_for_three_link" class="title">
        <div class="index"></div>
        Тут какой-нибудь HTML код для третьей ссылки
    </div>

Вот сам jQuery код:
Код JS

<script>
    $(document).ready(function(){
    
        // При наведении на ссылку
        $(".link_test").mouseover
        (function(){
            
            // Получаем ID блока, который нужно показать
            var title = $(this).attr("title");
            
            // Показываем блок
            $(this).append( $(title) );
            $(title).fadeIn();
        });
        
        // При уходе мышки со ссылки
        $(".link_test").mouseout
        (function(){
            
            // Получаем ID блока, который нужно показать
            var title = $(this).attr("title");
            
            // Скрываем блок
            $(title).fadeOut();
            
        });
    });
</script>

Тут всё работает так:

В title ссылки указываем ID блока, в котором содержится информация, которую нужно отобразить при наведении на ссылку. При наведении на ссылку title вытягивается и блок с этим ID показывается в том месте, где ему указано оторазиться в CSS стилях.
P.S. Блок с указанным ID помещается внутрь ссылки при наведении на неё. Поэтому блок отображается относительно ссылки.

Добавлено: 07 Февраля 2015 08:49:18 Добавил: Андрей Ковальчук Нравится 0

Добавить