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

Question

Я хочу, чтобы наведите указатель мыши на мой логотип на главном экране, чтобы вернуть выцветший текст и изображение в подвале внизу. (Текст и изображение исчезают через 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-классе = "логотип" Как это сделать?

Answer 1

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

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

Here's a fiddle demonstrating the CSS hover fade effect.

More information about CSS transitions can be found here.

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; 
}