如何使用 :hover 在单击时保持悬停状态创建 div？答案

【问题标题】：How do I make a div with :hover stay in hover state on click?如何使用 :hover 在单击时保持悬停状态创建 div？
【发布时间】：2017-01-31 14:14:12
【问题描述】：

我不完全确定如何提出这个问题，但基本上，我有一个带有按钮的 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 但它不起作用，任何帮助都会非常感激！

【问题讨论】：

标签： javascript jquery html css hover

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

【讨论】：

这很奇怪，尽管它表明它在这里使用 :focus 可以工作，但它在我的代码中不起作用。有什么理由会发生这种情况吗？
@EdenChew，也许在你的代码中你做错了什么。也许选择器是错误的。或者css 被另一个css 规则覆盖。它可以是很多东西。在您拥有项目的同一位置的新单独文件中尝试我的答案中的代码，看看它是否有效。

【解决方案2】：

div:active

只在鼠标点击时停留，

使用

div:focus

改为

【讨论】：

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

【讨论】：

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

【讨论】：