Как на mouseenter показать блок и перейти на него?

Question

[HelenaS]

Добрый день!

Есть страница каталога. При наведении на карточку каталога (mouseenter), должен показаться скрытый блок. Что-то вроде быстрого просмотра. При этом должна остаться возможность перейти на сам блок, что показан при наведении.
Мой скпирт:

$(document).on('mouseenter', '.slider-item__img', function(e){
        e.stopPropagation();
            $(this).siblings('.quick-view-wrapper').show();
            $(this).siblings('.quick-view-wrapper').stop(true);
});

$(document).on('mouseleave', '.slider-item__img', function(e){
        $(this).siblings('.quick-view-wrapper').hide();
         $(this).siblings('.quick-view-wrapper').stop(true);
});

Структура

<div class="catalog-auto__item">	
	<a class="slider-item__img" href="">
        <img src="" alt="">
    </a>
    <div class="quick-view-wrapper"></div>
</div>

Скрытый блок показываеться на mouseenter, но при я не могу на него перейти. И .stop(true) не останавливает анимацию когда осуществляеться mouseenter между карточками.
Исправить код на click не могу.
Заранее спасибо за помощь.

Comments

[Дима Долготер]

Тут скрипт пипец не правильный. залей на кодпен и посмотрим

Answer 1

[Дима Долготер]

$(document).on('mouseenter', '.catalog-auto__item', function(e){
        e.stopPropagation();
            $(this).siblings('.quick-view-wrapper').show();
            $(this).siblings('.quick-view-wrapper').stop(true);
});

$(document).on('mouseleave', '.catalog-auto__item', function(e){
        $(this).siblings('.quick-view-wrapper').hide();
         $(this).siblings('.quick-view-wrapper').stop(true);
});

вот так. но скрипт жопошный)