css - div 中的 CSS BaseLink 和附加链接

Question

我有以下结构：

<div class="boxLayer">
<a href="a.html"></a>
<div class="text">Result</div>
<div class="additionalLink"><a href="b.html"></a></div>
</div>

.boxLayer{
position: relative;
float:left;
height:28px;
width:100%;
border-top: 1px solid #cccccc;
background-color: #fff;
}

.boxLayer a {
display:block;
height:100%;
width: 100%;
background: white;
}

.boxLayer a:hover{
background-color: #ffeecc;
}

这个想法是在该框的左侧显示一个带有文本的框，并在框的右侧显示一个附加链接。当我将鼠标悬停在框上时，会显示框的背景颜色，当我将鼠标悬停在文本或第二个链接上时也是如此。我设法创建了框，但是当我添加文本或链接时，没有显示框的悬停效果。

Answer 1

我不确定这会是你的答案

请检查小提琴：

.boxLayer {
    position: relative;
    height:auto;
    float:left;
    width:100%;
    border-top: 1px solid #cccccc;
    background-color: #fff;
}

.boxLayer:hover {
    background-color: #ffeecc;
}

<div class="boxLayer">
    <a href="a.html" class="firstLink"></a>
    <div class="text">Result</div>
    <div class="additionalLink"><a href="b.html">&nbsp;</a></div>
</div>