Как сделать div «прозрачным» для hover?

Есть блок-лого, который js-скриптом плавно сдвигается влево или вправо в зависимости от того где курсор, на левой половине страницы или правой. Страница под лого поделена пополам на два дива .main-section

<div class="main-logo">
	<div class="logo-background"></div>
	<div class="logo-logo" >
			<img src="/logo.svg" alt="">
	</div>
</div>


jQuery(function(){
        var $logo = jQuery('.main-logo'),
	      $sections = jQuery('.main-section');

        $logo.on('move', function(e, parent){
            var $parent = jQuery(parent);
            $logo.animate({
		     left: $parent.offset().left + $parent.width()/2
            }, {
                queue: false
		});	
        });

        $sections.hover(
            function(e){
                $sections
                    .removeClass('hover')
                    .filter(this).addClass('hover');
		   $logo.trigger('move', this);
            },
            function(e){
                $sections.removeClass('hover');
		$logo.trigger('move', 'body');

            }
        )
    });


Работает все отлично по курсор над дивами '.main-section', как только навожу курсор на блок-лого он начинает биться в конвульсиях пытаясь вернуться обратно. Как сделать так чтобы для скрипта блок-лого был как-бы прозрачным?
Идея взята отсюда https://www.mab-moebel.ch/ , там при наведении на лого оно не пытается уйти обратно в центр
  • Вопрос задан
  • 163 просмотра
Решения вопроса 1
SmthTo
@SmthTo Куратор тега CSS
Все перепёлки мира будут оплакивать мою смерть.
Попробуйте pointer-events: none; добавить к логотипу в CSS. Это отключает элемент для взаимодействия, а клик по нему проходит сквозь него.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
НТЦ РОСТ Москва
от 150 000 до 250 000 руб.
Sveak Барнаул
от 50 000 руб.
iFellow Екатеринбург
До 180 000 руб.