наведите курсор мыши на отдельный div и снова откройте еще один потухший div - PullRequest
Новая
       39

наведите курсор мыши на отдельный div и снова откройте еще один потухший div

1 голос
/ 29 февраля 2012

Я хочу иметь возможность навести указатель мыши на мой логотип на главном экране, чтобы вернуть затемненный текст и изображение в div под ним.(Текст и изображение исчезают через 9 секунд после открытия страницы, если их не прерывает мышь).

Вы можете увидеть домашнюю страницу здесь www.dgimages.co.nz

Мой код JSдля исчезновения и т. д. ниже, но, вероятно, не требуется для того, что я хочу сделать: 

$(document).ready(function() {
var fade = setTimeout(function(){
    $("div.left-col-wrap-outer").fadeOut("slow", function () {
            $("div.left-col-wrap-outer").remove();
    });
}, 9000);

    $("div.left-col-wrap-outer").mouseout(function(e) {
    fade = setTimeout(function(){
        $("div.left-col-wrap-outer").fadeOut("slow", function () {
                $("div.left-col-wrap-outer").remove();
        });
    }, 9000);
});

    $("div.left-col-wrap-outer").mouseover(function() {
    clearTimeout(fade);
    });

});

мой логотип находится в div class = "logo" Как мне это сделать?

1 Ответ

0 голосов
/ 01 марта 2012

Затухание при div при наведении может быть полностью выполнено с помощью CSS.Единственное, для чего вам действительно нужен jQuery, - это первоначальное замедленное затухание при загрузке страницы.

Трюк на самом деле довольно прост.Внешний контейнер содержит как ваш логотип, так и контент, который вы хотели бы исчезнуть.Контейнер, который должен исчезнуть, постепенно исчезает с помощью CSS-переходов, когда пользователь включает и останавливает на внешний контейнер .Таким образом, вместо того, чтобы использовать что-то вроде #logo:hover, вы в конечном итоге будете использовать что-то более похожее на #outer:hover #fade.

Вот скрипка, демонстрирующая эффект затухания CSS .

Более подробную информацию о переходах CSS можно найти здесь .

HTML: 

<div id="outer">

    <img /> <!-- Your logo -->

    <div id="fade">
        <img /> <!-- Any images you want in the faded out menu -->
        <h3>I like bells.</h3>
    </div>

</div>​

И CSS: 

#outer {
    width:120px;
}

#fade {
    opacity:0;
    -webkit-transition-property:opacity;
    -webkit-transition-duration:1s;
    -moz-transition-property:opacity;
    -moz-transition-duration:1s;
    -ms-transition-property:opacity;
    -ms-transition-duration:1s;
    -o-transition-property:opacity;
    -o-transition-duration:1s;
}

#outer:hover #fade {
    opacity:1;
    -webkit-transition-property:opacity;
    -webkit-transition-duration:1s;
    -moz-transition-property:opacity;
    -moz-transition-duration:1s;
    -ms-transition-property:opacity;
    -ms-transition-duration:1s;
    -o-transition-property:opacity;
    -o-transition-duration:1s;
}
...