如何让 .hover 使用 if 语句

Question

我有一个带有标签的页面（每个标签都标记为第 1、2 和 4 列）。试图弄清楚如何让 .hover 函数工作并使所述选项卡 -> $('.column1').css("left", "calc(-100vw + 180px)");当您将鼠标悬停在...时增长到 190 像素？但只有当标签在其“calc（-100vw + 180px）”时才是not $ $（“列1”）。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");
        $(".column1").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()");
});