從 div onlick 切換懸停（刪除懸停，將其添加回來）

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>