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

的第一个子元素

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

1 个答案: