Как сделать 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/ , там при наведении на лого оно не пытается уйти обратно в центр
  • Вопрос задан
  • 643 просмотра
Решения вопроса 1
SmthTo
@SmthTo Куратор тега CSS
Все перепёлки мира будут оплакивать мою смерть.
Попробуйте pointer-events: none; добавить к логотипу в CSS. Это отключает элемент для взаимодействия, а клик по нему проходит сквозь него.
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы