Change the element after resize

Im building a menu bar and I need to change the shown element after the window resize, approximately when its half of the full size. And also the element must be triggered on hover.

I tried many combination with window.width and also with jquery commands like mouseenter, show etc.

Im puting here example code that I tried to run.

The #thu element is an “a” element in my html code, that is th trigger.

#box is the first element to show

thrist is the second element to show, after window resize.

$( "#thu" ).mouseenter(function(){
        $("#box").show();
    });
    $( "#thu" ).mouseleave(function(){
        $("#box").hide();
    });


    if ($(window).width() < 1000){
        $("#box").css("visibility", "hidden");
        
    }
    if ($(window).width() < 1000){
        $( "#thu" ).mouseenter(function(){
        $(".thrist").show();
    });
    $( "#thu" ).mouseleave(function(){
        $(".thrist").hide();
    });
    }

Thanks for any help.