Замена класса DIV при наведении с помощью jQuery

#jquery #css #hover #toggle #hidden

#jquery #css #наведите #переключение #скрытый

Вопрос:

Это то, чего я пытаюсь достичь :

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>

Вот рабочая СКРИПКА, чтобы вы могли видеть, что происходит.

Есть предложения?

1. Почему бы не использовать css hover?

2. после переключения на другой div и наведения курсора мыши вы хотите сохранить состояние или вернуться к умолчанию?

3. @servabat я не уверен, что ты имеешь в виду?

4. @MaulikAnand я бы хотел, чтобы он вернулся к состоянию по умолчанию.

5. иными словами 🙂 сделайте его удобным для пользователя, как пользователь узнает, что здесь требуется наведение курсора, и вам также нужно указать им направление 🙂

Ответ №1:

Не используйте visibility:hidden , вместо этого используйте display:none

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

Рабочая демонстрация