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

Question

我有一个div作为一个tile / box，当div悬停或活动时，背景颜色应该改变。我的悬停很好，但我的主动是有问题，不知道为什么。我的代码：

HTML：

<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>

尝试将active应用于swipeBox类（不，它不是锚的父级，但应该仍然有效）。 CSS：

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