时间戳

首页 > 解决方案 > 如何使我的 :active 伪元素工作？

css - 如何使我的 :active 伪元素工作？

问题描述

div我创建了一个像按钮一样工作的可点击对象。我设法创建了它的:hover状态，但我无法让:active状态正常工作。我基本上需要按钮在单击时保持其:hover样式。我只想使用 CSS。我正在使用引导程序 4。

.delete-ad-reason-box {
  display: inline-block;
  width: 100%;
  border: 2px solid red;
  border-radius: 0.25rem;
  color: red;
  font-size: 1em;
  margin: 30px 0;
  padding: 20px 15px;
  line-height: 20px;
}

.delete-ad-reason-box i {
  font-size: 1.5em;
  margin-bottom: 10px;
  color: red;
}


/* Here's the ":active" */

.delete-ad-reason-box:hover,
.delete-ad-reason-box:active {
  border: 2px solid red;
  background: red;
  color: white;
}

.delete-ad-reason-box:hover>i,
.delete-ad-reason-box:active>i {
  color: white;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">


<a href="#" class="col-lg-4 col-md-4 col-sm-10 col-xs-10 col-10">
  <div class="mx-auto delete-ad-reason-box" id="#">
    <i class="fas fa-frown d-block"></i> Click Me
  </div>
</a>

标签： css

解决方案

您不能: active用于 div 元素。您只能通过 javascript 来实现它

推荐阅读