Question

我不确定如何提出这个问题，但基本上，我有一个带有一些按钮的div：CSS中的悬停状态，但是，我想要点击按钮，它会留在悬停这是可能的吗？

我的代码

＆＃13;

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

＆＃13;

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

＆＃13;

我已经尝试过搜索类似的问题，其中一个人说要使用：焦点状态但它不起作用，任何帮助都会有很大的帮助！

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>

如何制作div：点击时悬停状态为悬停状态？

4 个答案: