Html 将伪活动类应用于元素对象的问题

我有一个div，它可以充当平铺/方框，当该div悬停或处于活动状态时，背景颜色应该会改变。我的悬停状态很好，但我的active有问题，不知道原因。我的代码：

html:

---

@史蒂文斯-谢谢你。我以前从未这样尝试过。也就是说，当人们需要一个div来拥有一个活动状态时，他们做了什么来解决这个问题？您面临的实际问题是什么？“swipeBox:hover”之前缺少一个“点”，您不能只执行

a:hover.swipeBox，a:active.swipeBox

（例如），或者这不是您想要的效果吗？究竟是什么触发了div的“活动”状态。对于非交互元素，通常不会发生这种情况。

<div class="swipeBoxes" ng-repeat="swipe in swipes">
    <a href="" ng-click="editSwipe(swipe)" >
        <div class="swipeBox col-md-12">
            <div class="col-md-12 claimObject">
                <span class="claimLine" style="width: 3px; position: absolute; top: 5px; left: 5px;">{{ $index + 1 }}.</span>
                <span class="claimedLeft">swipe date:</span>
                <span class="claimedRight">{{ swipe.date | date: 'MM/dd/yyyy'}}</span>
            </div>
            <div class="col-md-12 claimObject">
                <span class="claimedLeft">provider:</span
                ><span class="claimedRight">{{ swipe.merchant }}</span>
            </div>
            <div class="col-md-12 claimObject">
                <span class="claimedLeft">amount:</span>
                <span class="claimedRight">{{ swipe.amount | currency }}</span>
            </div>
        </div>
    </a>
</div>

.swipeBox:hover, .swipeBox:active {
    background-color: #efefef;
}