Why after hovering, over the small side bar, the large logo appears, but when I remove the cursor, the small logo does not appear

I have two logos, a small logo and a large logo on the dashboard but I encounter a problem when I hover on the small side-bar, large logo appears but if you remove the cursor large logo does not disappear.

I want it to disappear and then the small logo appears again sorry for my poor English

<div class="sidebar">
    <a href="#" class="sidebar-brand px-3">
       <img src="assets/img/large-logo.png" class="large-logo d-none">
       <img src="assets/img/small-logo.png" class="small-logo">
    </a>
</div>

Jquery

$(document).on('mouseover', function(e) {
        e.stopPropagation();
        if($('.large-logo').hasClass('d-none')) {
            var targ = $(e.target).closest('.sidebar').length;
            if(targ) {
                $('.large-logo').removeClass('d-none');
                $('.small-logo').addClass('d-none');
            }
            else
            {
                $('.small-logo').removeClass('d-none');
                $('.large-logo').addClass('d-none');
            }
            return false;
        }
    });

You are asking for action on both mouseover and mouseleave. Show large logo on mouseover and on mouse leave show small logo.

$(document).on('mouseleave', function(e) {}

Also if you have only mouse actions specific to these icons, suggest to please do

$(#elementId).on(<action>, function(e) {}