How can I toggle sections with mouseenter/mouseleave events using jQuery and Elementor?

Question

I want to achieve that when you do over on the colored elements their respective section appears. This is my code but sometimes it crashes. Also, I need help to make that if another object is not touched, the mouseenter stays on the selected element when scrolling down. Mi ejemplo

<script>
     
jQuery(document).ready(function($) {
     
    $('.boton-bloque').mouseenter(function(event) {
     
        event.preventDefault();
        var s = $(this).attr('bloque');
      /*  $('.bloque-texto').hide();
        $('.'+s+'').fadeIn(1000);*/
       $('.'+s+'').slideToggle();
   
    });

    $('.boton-bloque').mouseleave(function(event){
                event.preventDefault();

         $('.bloque-texto').hide();
         /* $('.'+s+'').fadeIn(1000);*/
    });
 
});
     
</script>