Question

我正在尝试创建一个包含两列（框）的区域。在每列中将有几个链接。当悬停一个链接时，我想显示有关下面链接的信息。

好的，所以我有这个代码（只有一个链接）

.area
{
width: 840px;
position:fixed; left:50%;
margin:50px 0px 20px -420px;
float:left;
text-align: center;
}

.box
{
width:400px;
text-align: center;
float:left;
margin: 0 5px 0px 5px;
line-height:24px;
}

.link
{
width:400px;
margin-bottom:5px;
background-color:#222;
color: #FFF;
font-weight:bold;
line-height:24px;
}

.linkinfo
{
display: none;
width:400px;
margin-bottom:5px;
color: #222;
line-height:24px;
}

.link:hover .linkinfo
{
display:block;
}

然后这个：

<div class="area">

<div class="box">

<div class="link"><a href="URL>here goes the link</a></div>
    <div class="linkinfo">
    Here</br>
    goes</br>
    the</br>
    information</br>
    </div>

<div class="somethingelse">there's also other stuff in the box</div>

</div>

<div class="box">
this is the other column
</div>

</div>

然而，问题是它不会像这样工作。＆＃34; linkinfo＆＃34;当我将鼠标悬停在＆＃34;链接＆＃34;。

时，我不会显示

但是当我将代码更改为时，它确实有效：（.box：悬停而不是.link：悬停）

.box:hover .linkinfo
{
display:block;
}

但我需要它来显示何时只悬停链接，而不是整个框。我错过了什么？

当悬停另一个div时显示div将无效

0 个答案: