单击时从 div 切换悬停（删除悬停，将其添加回来）

Question

单击一个 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。谢谢！

[]

Answer 1

试试这个：

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>

Answer 2

在元素点击事件后切换样式（悬停、颜色）：

function toggleStyle(el){
    if(el.className == "initial"){
      el.className="clicked";
      }
    else{
      el.className = "initial";
      }
    }

 div { border: 1px solid black; border-collapse: collapse}
.initial{ background-color: #efefef; }        
.initial:hover { background-color: #B4FDAB; }
.clicked { background-color: red; }

p.css3{background-color: #efefef;}
p.css3:hover{ background-color: #B4FDAB; }
p.css3:focus{background-color: #B6C2EF; }
p.css3:active{background-color: #B6C2EF; }

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

<h3>Testing css 3 focus or active </h3>
<p class="css3">css 3 focus or active seem to be insufficient</p>

测试一个只有 css 3 的解决方案

似乎使用 active 或 focus 是不够的，因为悬停状态没有被替换

p.css3{background-color: #efefef;}
p.css3:hover{ background-color: #B4FDAB; }
p.css3:focus{background-color: #B6C2EF; }
p.css3:active{background-color: #B6C2EF; }
<p class="css3">css 3 focus or active</p>