How to set a larger size for an element inside the code

I have a sidebar, I need to remove this sidebar when I remove the mouse from this sidebar.

At the moment it is removed when I move the mouse away from it, but I need it to be removed when I move the mouse away from it + 100 pixels to the right, but I don’t want to add 100 pixels to its width, I want it all to be left only inside the js code and does not reflect inside html.

I tried to do it like this: $(".group-side-context").offset().right + 100px

if($(".group-side-context").mouseover){
$(".group-side-context").mouseleave(function(){
    $(this).parent().removeClass("context-sidebar-active").addClass("context-sidebar-close").removeClass("context-sidebar-close").addClass("context-sidebar");
  })
};