Блог

Возможно ли выполнить подкачку или показать / скрыть при наведении курсора мыши на 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?

Спасибо, Зак

Конечно. Вы захотите изучить .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 этом экземпляре вложен в

посмотрите на это в действии

посмотрите: http://jsfiddle.net/uQuTt /