Po najechaniu na div, div znika a pojawia się menu

Question

Dzień dobry,

 

mam do wykonania pewien mały projekt w HTML, CSS i Bootstrapie i nie mogę wymyślić, jak zakodować jedną rzecz.

 

Chodzi o następujący przypadek: na stronie mam już ładnie rozmieszczonego diva. Po najechaniu na ten div chciałbym, aby on miękko znikł, a na jego miejscu pojawił się nowy div, zawierający menu. Samo menu bez problemu potrafię stworzyć, gorzej z tym, żeby po najechaniu na diva1 div1 zniknął a pojawił się inny - to jest dla mnie niejasne.

 

Uprzejmie proszę o pomoc, jak to rozpisać?

Answer 1

Użyj jquery:
https://api.jquery.com/hover/
https://jqueryui.com/effect/
 

$('#div-do-znikniecia').hover(function() {
  $( this ).fadeOut( 100 );
  $( '#div-do-pojawienia').fadeIn( 500 );
});

Coś w tym stylu :)

Comments

Miko, mam pytanie do tego projektu, bo nadal nie umiem sobie z tym poradzić.

 

Czy najpierw w tym divie oznaczonym jako #div-do-pojawienia, mam przypisać mu w CSS display:none? Jak zrobić, żeby on "informatycznie" istniał, ale nie pojawił się do czasu, aż ktoś nie najedzie/nie kliknie (tak nawet lepiej) w #div-do-zniknięcia ?

---

Przepraszam, że tak długo, ale nie wchodziłem ostatnio na forum...
Dokładnie tak, display:none powinno załatwić sprawę.