Как показать наложение div при наведении курсора на div с помощью jQuery? - PullRequest
Новая
       36

Как показать наложение div при наведении курсора на div с помощью jQuery?

4 голосов
/ 25 октября 2011

Я хочу показать оверлейный элемент div, расположенный поверх скрытого тега div, похожий на этот эффект на веб-сайте IBM: http://www.ibm.com/us/en/

Пожалуйста, посмотрите на 3 поля рядом с нижним колонтитулом.Наведите курсор на поле «Давайте построим разумную планету», чтобы просмотреть эффект.

Ответы [ 3 ]

7 голосов
/ 25 октября 2011

Я создал рабочий пример .По сути, вам нужно создать 3 div с видимыми и невидимыми контейнерами, добавить обработчик событий hover и переключить видимость подсказки в этом обработчике.

HTML: 

<div class="parents">
    <div class="box type-1">box 1</div>
    <div class="tooltip type-1">tooltip 1</div>
</div>

<div class="parents">
    <div class="box type-2">box 2</div>
    <div class="tooltip type-2">tooltip 2</div>
</div>

<div class="parents">
    <div class="box type-3">box 3</div>
    <div class="tooltip type-3">tooltip 3</div>
</div>

CSS: 

.parents
{
    float: left;
    margin: 5px;
}

.box,
.tooltip
{
    width: 80px;
    height: 30px;
    line-height: 30px;

    background-color: #666;
    color: #fff;
    border: 1px solid #222;
    text-align: center;
}

.tooltip
{
    display: none;
    position: absolute;
    top: 50px;
}

j Код запроса: 

$(document).ready
(
    function ()
    {
        // add hover event handler
        $('.box').hover
        (
            function ()
            {
                // find the triggering box parent, and it's tooltip child
                $(this).parent().children('.tooltip').animate
                (
                    {
                        opacity: "toggle",      // toggle opacity
                    }
                );
            }
        );
    }
);
3 голосов
/ 25 октября 2011

IBM использует метод Dojo's .expand. Вы можете сделать то же самое в jQuery, используя плагин expand .

2 голосов
/ 25 октября 2011

Вы можете легко это сделать. Шаги должны следовать:

1) Имейте 3 блока, таких как DIVs или UL LI, и добавьте скрытый контейнер внутри (или это не имеет значения, если вы установите положение с помощью jQuery. Если ваша структура будет: 

<div class="block">
<div class="invisible"></div>
<div class="visible"></div>
</div>

2) Прикрепить события mouseenter и mouseleave ко всем 3 блокам, например: 

$('.block').mouseenter(function() {
// some code to show the hidden container

$(this).find('.visible').show().addClass('visible_container');

});

$('.block').mouseleave(function() {
// some other code to hide the shown container
$('.visible_container').hide(); // Hide all the instances of .visible_container
});

3) Вам следует изменить JS или CSS в соответствии с методами позиционирования для ваших элементов, чтобы при вызове show() элемент отображался прямо над элементом. Например, если у вас скрытый блок будет иметь правило CSS position: absolute, вы должны использовать: 

$(this).find('.visible')
       .show()
       .addClass('visible_container')
       .css('top', $(this).offset().top+'px')
       .css('left', $(this).offset().left+'px');

В этом случае показанный контейнер будет отрегулирован в правый верхний угол навесного блока.

Поскольку скрытый контейнер является дочерним по отношению к контейнеру блоков, событие mouseleave вызываться не будет, поэтому оно будет отображаться правильно.

...