Jquery 如何获取.悬停以使用if语句

我有一个带有选项卡的页面（每个选项卡标记为第1列、第2列和第4列）。试图弄清楚如何使.hover函数工作，并使所说的tab->$（'.column1'）.css（“left”，“calc（-100vw+180px）”）；当你把鼠标悬停在…上时会增长到190px。。。？但仅当选项卡处于其“calc（-100vw+180px）”状态时，才不使用$（“.column1”）.css（“左”、“0”）；当它完全打开的时候

$(".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");
    }    
});

---

要在鼠标位于对象上时更改属性，最好使用“mouseover”事件添加鼠标位于元素上时想要的效果。 和“mouseleave”事件来消除效果

$(".column1,.column2,.column4").on("mouseover", function(){
    $(this).css("left", "doWhatYouWantWhenMouseIsOnTheElement()");
});

$(".column1,.column2,.column4").on("mouseleave", function(){
    $(this).css("left", "revertWhatYouHaveDoneInTheOv()");
});

---

按您的建议使用，但当鼠标悬停在第1列和第2列上时，会自动关闭并覆盖。单击