Блог

Я пытаюсь создать область с двумя столбцами (полями). в каждом столбце будет несколько ссылок. При наведении курсора мыши на одну ссылку я хочу показать информацию о ссылке под ней.

Хорошо, итак, у меня есть этот код (только для одной ссылки, которая будет)

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

Проблема, однако, в том, что это не будет работать так.
«linkinfo» не отображается при наведении курсора мыши на «ссылку».

Но это работает, когда я меняю код на этот: (.box:hover вместо .link:hover)

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

Но мне нужно, чтобы при наведении курсора он показывал только ссылку, а не все поле целиком. Чего я не понимаю?