JQuery - поменять местами DIV при наведении мыши

Question

Можно ли выполнить своп или показать / скрыть при наведении курсора на элемент div?

Например, скажем, у меня есть два DIV:

<div id="box1">content of box 1</div>
<div id="box1-hover">you are hovering on this box</div>

Поле 1 должно отображаться настраница, со скрытым наведением box1, затем, когда вы наводите указатель мыши на поле 1, box1-hover должен стать видимым НАД ВЕРХОМ (так что в основном это выглядит как своп).Затем при наведении мышки окно hover снова скрывается.

Это выполнимо?Если да, может кто-нибудь продемонстрировать с помощью jsfiddle?

Спасибо, Зак

Answer 1

Конечно. Вы захотите исследовать .mouseenter , .mouseleave , .show и .hide . Код ниже должен помочь вам в этом.

$(document).ready(function() {
    $("#box1").mouseenter(function() {
        $("#box1-hover").show();
    }).mouseleave(function() {
        $("#box1-hover").hide();
    });
});

Для CSS вы захотите понять z-индексы и абсолютное позиционирование внутри относительного позиционирования . Индекс Z указывает, насколько «высоким» на странице является элемент (воспринимайте вещи как идущие к вам). Абсолютно позиционированный элемент в относительно позиционированном элементе абсолютно позиционируется против родителя , а не страницы.

Необходимый CSS:

#box1 {
    z-index: 2;
    float: left;
    position: relative;
}

#box1-hover {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 1;
}

Обратите внимание, что div для box1-hover вложен в box1, в данном случае

увидеть его в действии

Answer 2

взгляд: http://jsfiddle.net/uQuTt/