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

Question

[Constantine]

Есть блок-лого, который 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/ , там при наведении на лого оно не пытается уйти обратно в центр

Comments

[Rustam Bainazarov]

Попробуйте pointer-events: none; добавить к логотипу в CSS. Это отключает элемент для взаимодействия, а клик по нему проходит сквозь него.

[Constantine]

Рустам Байназаров, спасибо большое тебе добрый человек! То что нужно, да и там откуда идею черпнул есть этот параметр, не доглядел...

[Rustam Bainazarov]

Constantine, пишу ответ тогда.

Answer 1

[Rustam Bainazarov]

Попробуйте pointer-events: none; добавить к логотипу в CSS. Это отключает элемент для взаимодействия, а клик по нему проходит сквозь него.