javascript - 如何使用 :hover stay in hover state on click? 制作一个 div

Question

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

我的代码

#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 state 但它不起作用，任何帮助都将不胜感激!

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>