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无关紧要。谢谢！

[ toggle style ]

Answer 1

试试这个：

＆＃13;

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

＆＃13;

    .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;
    }

＆＃13;

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

＆＃13;

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解决方案

似乎使用主动或焦点是不够的，因为悬停状态未被替换

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>

从div onlick切换悬停（删除悬停，添加回来）

2 个答案:

仅测试css 3解决方案