【发布时间】：2013-07-01 21:11:03
【问题描述】：
我使用 php 生成链接，然后我使用 css 将它们放入 2 列。此外，当用户将鼠标悬停在链接上时，会显示额外信息，如标题属性。这一切都很好，除了当我将鼠标悬停在第二列中的某些东西上时，额外的信息没有显示出来。 这是我的 CSS 代码：
#pantherGal{
position:relative;
height:667px;
width:840px;
background-color:rgba(0, 0, 0, .9);
top:-1269px;
left:-850px;
padding-left:10px;
overflow:auto;
color:#393;
font-family:Arial, Helvetica, sans-serif;
font-size:x-large;
column-count:2;
-moz-column-count:2; /* Firefox */
-webkit-column-count:2; /* Safari and Chrome */
}
a.tip:hover {
position: relative;
}
a.tip span {
display: none
}
a.tip:hover span {
position:relative;
padding:5px 20px 5px 5px;
display:block;
z-index:100;
background-color: rgba(0, 0, 0, .9);
color:#393;
margin-left:10px;
width:250px;
position:absolute;
top:10px;
}
链接是在一个 id 为 pantherGal 的部分中生成的，然后链接 html 看起来像这样
<a href="#" class="tip"><span>Extra<br>Info</span>This Is A Link With Extra Info</a><br>
【问题讨论】：
-
您指的第二列是什么？这是您现在的代码：jsfiddle.net/95CrM
-
对不起，他们有 50 个这样的链接 jsfiddle.net/cmbasse/sHpBG
标签： html css hover multiple-columns