как заставить .hover работать с оператором if

Question

У меня есть страница с вкладками (каждая вкладка помечена как столбцы 1, 2 и 4). Попытка выяснить, как заставить работать функцию .hover и сделать указанную вкладку -> $ ('. Column1'). Css ("left", "calc (-100vw + 180px)");расти до 190px, когда вы наводите курсор мыши ...? но только когда вкладка находится в состоянии «calc (-100vw + 180px)», а не $ («. column1»). css («left», «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");
    }    
});

Answer 1

Чтобы изменить свойство, когда мышь находится над объектом, было бы лучше использовать событие mouseover, чтобы добавить эффект, который вы хотите получить, когда мышь находится над элементом. И событие mouseleave для удаления эффекта.

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

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