javascript - 单击时从div切换悬停(删除悬停，将其重新添加)

在点击一个div之后，我想改变它的颜色并禁用悬停。再次单击时，我希望它切换到以前的颜色并再次启用悬停。
所以我有一个div：

<div class="leftTeam"></div>

有这个悬停：

.leftTeam {
    border: 1px solid #d9d9d9;
    margin-auto;
    float: left;
    border-radius: 4px;
    background-color: #fff;
    width: 200px;
    height: 30px;
}

.leftTeam:hover {
    border: 1px solid #adadad;
    background-color: #e6e6e6;
    transition: 1s;
}

这些图像显示了所需的行为。不管它是纯CSS代码还是javascript代码。谢谢！
[]

最佳答案

试试这个

function switchClass(ele){
    if(ele.className == "leftTeam"){
      ele.className+=" clicked";
      }
    else{
      ele.className = "leftTeam";
      }
    }

    .leftTeam {
        border: 1px solid #d9d9d9;
        margin-auto;
        float: left;
        border-radius: 4px;
        background-color: #fff;
        width: 200px;
        height: 30px;
    }

    .clicked:hover {
        border: 1px solid #adadad;
        background-color: #e6e6e6;
        transition: 1s;
    }

<div class="leftTeam" onclick="switchClass(this)">Click to change the class!</div>