html - 将焦点状态添加到具有嵌入式链接的容器

Question

我有一个 Angular ng-repeat，它创建框并返回一个包含一些信息的容器。我有悬停效果，但很难让焦点发挥作用。基本上，允许单击这些容器，然后显示一个带有附加信息的更大的框。在下面显示我的代码。有想法吗？

html:

<h1>Pending Swipes</h1>
<div class="swipeBoxes" ng-repeat="swipe in swipes" ng-required="true">
    <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>

css 是为了使这项工作有点:

.swipeBoxes a {
    text-decoration: none;
}

.swipeBoxes a:hover {
    text-decoration: none;
}

.swipeBox, .recurBox {
    background-color: #ffffff;
    margin-top: 10px;
    min-height: 85px;
    box-shadow: 0 0 8px rgba(0,0,0,.5);
    border-radius: 2px;
    color: #000000;
}

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

.swipeBox >a:active, .swipeBox >a:focus {
    background-color: #efefef;
}

Answer 1

:focus 选择器只允许在接受键盘事件或其他用户输入的元素上使用。

因此它适用于 a 元素，但不适用于 div。

你的 CSS 规则:

.swipeBox >a:active, .swipeBox >a:focus {
    background-color: #efefef;
}

不起作用，因为您没有 a 元素作为 .swipeBox 的第一个子元素