Javascript 如何使用以下命令进行div：单击鼠标悬停并保持悬停状态？

我不知道该怎么问这个问题，但基本上，我有一个带有按钮的div，在CSS中有一些：hover state，但是，我希望在单击按钮时，它将保持悬停状态，这可能吗

我的代码

#英语按钮{
宽度：200px；
高度：50px；
字体系列：“Raleway”，无衬线；
利润率：0px 20px 20px 20px；
边界：无；
大纲：无；
背景色：#F16D71；
颜色：#FFFFFF；
过渡色：.3s背景色；
文本对齐：居中；
字体大小：20px；
边界半径：15px；
}
#英语按钮：悬停{
背景色：#F5999C；
颜色：#FFFFFF；
光标：指针；
}

---

有很多方法可以做到这一点：

您可以使用

：focus

：

#英语按钮{
宽度：200px；
高度：50px；
字体系列：“Raleway”，无衬线；
利润率：0px 20px 20px 20px；
边界：无；
大纲：无；
背景色：#F16D71；
颜色：#FFFFFF；
过渡色：.3s背景色；
文本对齐：居中；
字体大小：20px；
边界半径：15px；
}
#英语按钮：悬停，#英语按钮：聚焦{
背景色：#F5999C；
颜色：#FFFFFF；
光标：指针；
}

仅在单击鼠标时停留

使用

---

相反

如果希望在用户单击页面上的其他位置（一个

元素等）后保持外观，则可以在单击按钮时设置一个类，并使用该类进行样式设置：

var el=$（“#英语按钮”）；
点击(
函数（）{
el.addClass（“点击按钮”）；
}
);
#英语按钮{
宽度：200px；
高度：50px；
字体系列：“Raleway”，无衬线；
利润率：0px 20px 20px 20px；
边界：无；
大纲：无；
背景色：#F16D71；
颜色：#FFFFFF；
过渡色：.3s背景色；
文本对齐：居中；
字体大小：20px；
边界半径：15px；
}
#英语按钮：悬停，
#英语按钮。点击按钮{
背景色：#F5999C；
颜色：#FFFFFF；
光标：指针；
}
您还可以使用javascript更改鼠标悬停格式，使其与单击类似

<style>
      .englishbutton {
      width: 200px;
      height: 50px;
      font-family: 'Raleway', sans-serif;
      margin: 0px 20px 20px 20px;
      outline: none;
      background-color: #F16D71;
      color: #FFFFFF;
      transition: .3s background-color;
      text-align: center;
      font-size: 20px;
      border-radius: 15px;
     }
     .englishbutton:hover {
     background-color: #F5999C;
     color: #FFFFFF;
     cursor: pointer;
    }
</style>
<div>
   <input id="button" type="button" class="englishbutton" value="ENGLISH" onclick="var s= document.getElementById('button');
s.style.backgroundColor='#F5999C';x.style.color='#ffffff';
" />
</div>


英语按钮{
宽度：200px；
高度：50px；
字体系列：“Raleway”，无衬线；
利润率：0px 20px 20px 20px；
大纲：无；
背景色：#F16D71；
颜色：#FFFFFF；
过渡色：.3s背景色；
文本对齐：居中；
字体大小：20px；
边界半径：15px；
}
.英语按钮：悬停{
背景色：#F5999C；
颜色：#FFFFFF；
光标：指针；
}
这很奇怪，尽管它显示它使用：focus here工作，但它在我的代码中不工作。有什么原因会发生这种情况吗？@EdenChew，也许在你的代码中你做错了什么。也许选择器错了。或者另一条
css
规则会覆盖此项的
css
。它可以是很多东西。在项目所在的同一位置，在一个新的单独文件中尝试我的答案中的代码，看看它是否有效。
div:focus

<style>
      .englishbutton {
      width: 200px;
      height: 50px;
      font-family: 'Raleway', sans-serif;
      margin: 0px 20px 20px 20px;
      outline: none;
      background-color: #F16D71;
      color: #FFFFFF;
      transition: .3s background-color;
      text-align: center;
      font-size: 20px;
      border-radius: 15px;
     }
     .englishbutton:hover {
     background-color: #F5999C;
     color: #FFFFFF;
     cursor: pointer;
    }
</style>
<div>
   <input id="button" type="button" class="englishbutton" value="ENGLISH" onclick="var s= document.getElementById('button');
s.style.backgroundColor='#F5999C';x.style.color='#ffffff';
" />
</div>