how to get .hover to work with if statement

I have a page with tabs (each tab labeled as column 1, 2, and 4). Trying to figure out how to get the .hover function to work and make said tab -> $('.column1').css("left", "calc(-100vw + 180px)"); grow to 190px when you hover over...? but only when the tab is in its "calc(-100vw + 180px)" state not $(".column1").css("left", "0"); which is when it is completely open.

$(".column1").on("click", function(){
    if ($('.column1').hasClass("closed")){
    $(".column1").css("left", "0");
    }
    else {
    $(".column1").css("left", "0");
    $(".column2").css("left", "0");
    $(".column4").css("left", "0");
    }

});

$(".column2").on("click", function(){
    if ($('.column2').hasClass("closed")){
        $(".column2").css("left", "0");
    }
    else {
        $(".column2").css("left", "0");
        $('.column1').css("left", "calc(-100vw + 180px)");
        $(".column4").css("left", "0");
    }

});


$(".column4").on("click", function(){
    if ($('.column4').hasClass("closed")){
        $(".column4").css("left", "0");
    }
    else {
        $('.column1').css("left", "calc(-100vw + 180px)");
        $('.column2').css("left", "calc(-100vw + 190px)");
        $(".column2").hasClass("closed");
        $(".columm1").hasClass("closed");
    }    
});