如何使用 :hover 在单击时保持悬停状态的 div

Question

我不完全确定如何问这个问题，但基本上，我有一个带有 CSS 中一些 ：hover 状态的按钮的div，但是，我希望在单击按钮后，它将保持悬停状态，这可能吗？

我的代码

#englishbutton {
    width:200px;
    height:50px;
    font-family: 'Raleway', sans-serif;
    margin:0px 20px 20px 20px;
    border:none;
    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;
}

<div id="actionsection">
        <input name="englishbutton" type="button" id="englishbutton" value="ENGLISH">
</div>

我尝试搜索类似的问题，其中一个说使用：focus状态，但它不起作用，任何帮助都会得到很多赞赏！

Answer 1

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

您可以使用:focus：

#englishbutton {
    width:200px;
    height:50px;
    font-family: 'Raleway', sans-serif;
    margin:0px 20px 20px 20px;
    border:none;
    outline:none;
    background-color:#F16D71;
    color:#FFFFFF;
    transition: .3s background-color;
    text-align:center;
    font-size:20px;
    border-radius:15px;
}
#englishbutton:hover, #englishbutton:focus {
    background-color:#F5999C;
    color:#FFFFFF;
    cursor:pointer;
}

<div id="actionsection">
  <input name="englishbutton" type="button" id="englishbutton" value="ENGLISH">
</div>

使用 jQuery，您可以使用 css（） 方法在按钮click添加背景：

$('#englishbutton').on('click', function(){
  $(this).css('background', '#F5999C');
});

#englishbutton {
    width:200px;
    height:50px;
    font-family: 'Raleway', sans-serif;
    margin:0px 20px 20px 20px;
    border:none;
    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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="actionsection">
  <input name="englishbutton" type="button" id="englishbutton" value="ENGLISH">
</div>

或者你可以使用 addClass（） 方法来添加一个样式化的活动类，如下所示：

$('#englishbutton').on('click', function() {
  $(this).addClass('active');
});

#englishbutton {
  width: 200px;
  height: 50px;
  font-family: 'Raleway', sans-serif;
  margin: 0px 20px 20px 20px;
  border: none;
  outline: none;
  background-color: #F16D71;
  color: #FFFFFF;
  transition: .3s background-color;
  text-align: center;
  font-size: 20px;
  border-radius: 15px;
}
#englishbutton:hover, #englishbutton.active {
  background-color: #F5999C;
  color: #FFFFFF;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="actionsection">
  <input name="englishbutton" type="button" id="englishbutton" value="ENGLISH">
</div>

Answer 2

div:active

仅在单击鼠标时停留，

用

div:focus

相反

Answer 3

如果您希望在用户单击页面上的其他位置（<input>元素等）后保留外观，则可以在单击按钮时设置一个类，并将其用于样式：

var el = $('#englishbutton');
el.click(
  function() {
    el.addClass('clickedbutton');
  }
);

#englishbutton {
  width: 200px;
  height: 50px;
  font-family: 'Raleway', sans-serif;
  margin: 0px 20px 20px 20px;
  border: none;
  outline: none;
  background-color: #F16D71;
  color: #FFFFFF;
  transition: .3s background-color;
  text-align: center;
  font-size: 20px;
  border-radius: 15px;
}
#englishbutton:hover,
#englishbutton.clickedbutton {
  background-color: #F5999C;
  color: #FFFFFF;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="actionsection">
  <input name="englishbutton" type="button" id="englishbutton" value="ENGLISH">
</div>
<input value="Focus here after clicking" />

Answer 4

您也可以使用 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>