Javascript 从div onlick切换悬停（删除悬停，重新添加）

单击一个div后，我想更改它的颜色并禁用悬停。再次单击时，我希望它切换到以前的颜色，并再次启用悬停

我有一个部门：

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

此图像显示了所需的行为。不管它是纯CSS代码还是包含javascript。谢谢

[]试试这个：

功能开关类（ele）{
if（ele.className==“leftTeam”）{
ele.className+=“单击”；
}
否则{
ele.className=“leftTeam”；
}
}

.leftTeam{
边框：1px实心#d9d9d9；
保证金自动；
浮动：左；
边界半径：4px；
背景色：#fff；
宽度：200px；
高度：30px；
}
。单击：悬停{
边框：1px实心#adadad；
背景色：#e6；
过渡：1s；
}

单击以更改类在元素上单击事件后切换样式（悬停、颜色）：


功能切换样式（el）{
如果（el.className==“首字母”）{
el.className=“单击”；
}
否则{
el.className=“首字母”；
}
}
div{边框：1px纯黑色；边框折叠：折叠}
.initial{背景色：#efefef；}
.首字母：悬停{背景色：#B4FDAB；}
.单击{背景色：红色；}
p、 css3{背景色：#efefef；}
p、 css3：悬停{背景色：#B4FDAB；}
p、 css3：焦点{背景色：#B6C2EF；}
p、 css3:活动{背景色：#B6C2EF；}
单击以更改类！
单击以更改类！
测试css3焦点或活动
css 3 focus或active似乎不够
单击添加一个类，并设置样式感谢这个全面的答案！注释不是答案…上是一个行为如上所示的列表。包含了很多你的问题不需要的html和css，你可以看看。我不知道你是否意识到了这一点，但就目前情况而言，有几点适用于你目前的努力。我真诚地感谢你！这工作得很好，但我也需要切换到它的正常设计，当我点击其他东西，例如。这样，即使我点击其他按钮，它也会保持点击状态。下面是一个我想做的快速gif视频。再次感谢你！你在哪里解决你的问题？你试过什么？我最后试过的是你的代码，但它只对一个div有效，当单击同一行中的另一个div时，它不会切换回正常状态。这是我的代码：我希望能够单击teams列中的两个div。例如，当在左分区中单击时，如果再次单击或单击右分区，则应将其颜色更改为紫色，并切换回正常。如果在另一列中单击其中一个分区，则上一列中单击的分区应保持活动状态。检查我提供的gif图像。另外（我之前的评论太长），当单击行本身时，行正在展开，但我希望只有在单击“立即直播”链接时，行才会展开。非常感谢。
.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;
}