#jquery #swap #mouseenter
#jquery #поменять местами #mouseenter
Вопрос:
Возможно ли выполнить подкачку или показать / скрыть при наведении курсора мыши на div?
Например, скажем, у меня есть два DIV:
<div id="box1">content of box 1</div>
<div id="box1-hover">you are hovering on this box</div>
На странице должно отображаться поле 1 со скрытым полем box1-hover, затем, когда вы наводите курсор на поле 1, поле box1-hover должно становиться видимым ПОВЕРХ НЕГО (так что в основном это выглядит как подкачка). Затем при наведении курсора мыши box1-hover снова становится скрытым.
Возможно ли это? Если да, может ли кто-нибудь продемонстрировать с помощью jsfiddle?
Спасибо, Зак
Ответ №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
этом экземпляре вложен в
Комментарии:
1. Извините, я не совсем точно объяснил — когда отображается box1-hover, он должен находиться поверх первого поля, в том же пространстве.
2. @Zach — да, я понял это, когда ты оставлял комментарий. Отредактировал свою скрипку и добавил сюда необходимый код.
3. большое спасибо. я изучаю jQuery, пока мы говорим, так что эта помощь неоценима!
Ответ №2:
посмотрите: http://jsfiddle.net/uQuTt /