Поменяйте класс DIV на зависание с помощью jQuery

Question

Вот чего я пытаюсь добиться:

2 DIV, при загрузке страницы виден первый DIV, при наведении он переключается на второй DIV (который изначально скрыт).

Оба DIV имеют одинаковую высоту и ширину и расположены абсолютно внутри оболочки.

Это то, что у меня так далеко, но это не работает должным образом -

JS:

 (function($) { 
 $(".wrap").hover(function() {
 $(".first,.second", this).toggle();
 })
 })( jQuery );

CSS:

 .wrap {position:relative;}

 .first {
 position:absolute;
 top:0;
 padding:20px;
 width:80px;
 height:80px;
 background:green;
 color:white;
 display:block;
 }

 .second {
 position:absolute;
 top:0;
 padding:20px;
 width:80px;
 height:80px; 
 background:yellow;
 color:blue;
 display:block;
 visibility:hidden;
 }

HTML:

<div class="wrap">
<div class="first">FIRST DIV</div>
<div class="second">SECOND DIV</div>
</div>

Вот рабочая скрипка, чтобы вы могли видеть, что происходит.

Какие-либо предложения?

Answer 1

Не использовать visibility:hiddenвместо display:none

.second {
      position:absolute;
      top:0;
      padding:20px;
      width:80px;
      height:80px; 
      background:yellow;
      color:blue;
      display:none;
}

Рабочая Демо