0

私は次の構造を持っています：

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

アイデアは、このボックスの左側にテキストが表示され、ボックスの右側に追加のリンクが表示されるボックスを持つことです。ボックスにカーソルを合わせると、テキストまたは 2 番目のリンクにカーソルを合わせると、ボックスの backgroundColor が表示されます。ボックスを作成できましたが、テキストまたはリンクを追加すると、ボックスのホバー効果が表示されません。

4

1 に答える 1

0

これがあなたの答えになるかどうかわかりません

フィドルを確認してください：

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

于 2012-05-03T10:33:58.203 に答える