2

Есть карточки товара.

$(".catalog_thumb").bind({
  mouseenter: function() {
    $(this).addClass("z_index");
  },
  mouseleave: function() {
    setTimeout(function() {
      $(this).removeClass("z_index");
    }, 400);

  }
});
.catalog_thumb.z_index {
  z-index: 2;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="catalog_thumbs offset-ziro">
  <div class="catalog_thumb">
    <div class="inner">
      <div class="img-box" style="background-image: url(img/img_15.jpg);"></div>
      <h3>Постельное белье<br /> Valtery</h3>
      <div class="descript_table">
        <div class="table_row">
          <div class="cell">
            <p>Артикул</p>
          </div>
          <div class="cell">
            <p>01-MO-36</p>
          </div>
        </div>
        <div class="table_row">
          <div class="cell">
            <p>Размер</p>
          </div>
          <div class="cell">
            <p>Семейный</p>
          </div>
        </div>
        <div class="table_row">
          <div class="cell">
            <p>Материал</p>
          </div>
          <div class="cell">
            <p>Сатин</p>
          </div>
        </div>
      </div>
      <div class="price_box">
        <div class="cell">
          <p class="old_price">6600 <span class="ruble">P</span></p>
        </div>
        <div class="cell">
          <p class="price">5500 <span class="ruble">P</span></p>
        </div>
      </div>
      <div class="thumb_footer">
        <a href="#" class="brown_pill">В корзину</a>
        <a href="#" class="favorite_link_2"><i class="fas fa-heart"></i></a>
      </div>


    </div>
  </div>
  <div class="catalog_thumb">
    <div class="inner">
      <div class="img-box" style="background-image: url(img/img_16.jpg);"></div>
      <h3>Постельное белье<br /> Valtery</h3>
      <div class="descript_table">
        <div class="table_row">
          <div class="cell">
            <p>Артикул</p>
          </div>
          <div class="cell">
            <p>01-MO-36</p>
          </div>
        </div>
        <div class="table_row">
          <div class="cell">
            <p>Размер</p>
          </div>
          <div class="cell">
            <p>Семейный</p>
          </div>
        </div>
        <div class="table_row">
          <div class="cell">
            <p>Материал</p>
          </div>
          <div class="cell">
            <p>Сатин</p>
          </div>
        </div>
      </div>
      <div class="price_box">
        <div class="cell">
          <p class="old_price">6600 <span class="ruble">P</span></p>
        </div>
        <div class="cell">
          <p class="price">5500 <span class="ruble">P</span></p>
        </div>
      </div>
      <div class="thumb_footer">
        <a href="#" class="brown_pill">В корзину</a>
        <a href="#" class="favorite_link_2"><i class="far fa-heart"></i></a>
      </div>
    </div>
  </div>
</div>

То есть нужно чтобы класс z_index удалялся с элемента через определенный интервал времени. Нужно чтобы наведенная карточка всегда была поверх всех.

Карточки на этой странице

2
  • Не совсем понятно, надо удалить класс спустя время после отведения курсора, но при этом карточка все равно должна остаться поверх. Я перешел по ссылке и увидел проблему. Разве не проще иметь везде одинаковый z-index, но при наведении курсора менять его на тот, у которого значение будет на 1 больше, а при уведении курсора просто этот z-index менять обратно на такой же как и у остальных карточек. Либо я чего-то не понимаю)
    – Kel Fish
    18 дек 2018 в 18:34
  • Так и делаю. Но он быстро удаляется. А нужно удалить через 0.4 секунды после отведения.
    – Denis
    18 дек 2018 в 20:20

1 ответ 1

3
$(".catalog_thumb").on('mouseenter',function(){
  $(this).addClass("z_index");
 });
$(".catalog_thumb").on('mouseleave',function(){
  var self = this;
    setTimeout(function() {
    $(self).removeClass("z_index");
  }, 400);

})

4
  • очень сомневаюсь, что mouseover && mouseout, для решения данной задачи подходят лучше. Покажите полностью рабой код
    – Dmytro
    19 дек 2018 в 11:11
  • @Дмытрык, codepen.io/Lukyanenko/pen/vvyRKe?editors=0010
    – Lukas
    19 дек 2018 в 11:31
  • Результат абсолютно такой же, как у автора вопроса
    – Dmytro
    19 дек 2018 в 11:41
  • @Дмытрык, да Вы правы. Неверно проверил проблему. Поправил ответ.
    – Lukas
    19 дек 2018 в 11:54

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.