完全隐藏表头并在悬停时显示它

Question

我想隐藏<th>当我们给display:none时发生这种情况但是如果我使用这个属性我无法在鼠标悬停时显示它。我在里面放了一个向上箭头把一些东西放在桌子上;
**当我的桌子没有处于悬停状态时，那些仍然隐藏但仍然留有我不想要的空白区域。**
我尝试使用此margin-top:-555px;和悬停margin-top:0，但无效

我不想要红色标记区域但是在给定链接上悬停状态对我来说是可以的。 请帮忙。 jsfiddle

<div class="existing_items">
<table cellspacing="0">
    <th class="pointer"colspan="2"><span>^</span></th>
    <tr><th class="" colspan="2">Title</th></tr>
    <tr><td class="leftname">name</td><td>name</td></tr>
    <tr><td class="leftname">type</td><td>type</td></tr>
</table>
</div>

.existing_items{
    background-color:green;
}
.existing_items table td{
text-align:center;
border-top:1px solid #eaeaea;
}
table:hover th.pointer{
visibility:visible;
} 

table th.pointer{
color:red;
visibility:hidden;
font-size:20px;
}
.leftname{
border-right:1px solid #eaeaea;
}

Answer 1

我建议不为此目的使用额外的（无用的）<th>。您可以在标题<th>上使用伪元素，因为它们似乎高度相关。请参阅下面的示例：

.existing_items{
    background-color:green;
}
.existing_items table td{
    text-align:center;
    border-top:1px solid #eaeaea;
}
table th.with-arrow {
    position: relative;
}
table:hover th.with-arrow:after{
    content: "^";
    position: absolute;
    left: 10px;
    top: 0;
    color: red;
    font-size:20px;
} 
.leftname{
    border-right:1px solid #eaeaea;
}

<div class="existing_items">
    <table cellspacing="0">
        <tr><th class="with-arrow" colspan="2">Title</th></tr>
        <tr><td class="leftname">name</td><td>name</td></tr>
        <tr><td class="leftname">type</td><td>type</td></tr>
    </table>
</div>

Answer 2

我在position:inherit;中添加了table:hover th.pointer，但它确实有效; 你可以在这里试试：

http://jsfiddle.net/gkiwi/t7eecbzp/

或者

.existing_items{
    background-color:green;
}
.existing_items table td{
    text-align:center;
    border-top:1px solid #eaeaea;
}
table:hover th.pointer{
    visibility:visible;
    top:-10px;
    left:20px;
    position:inherit;
} 

table th.pointer{
    color:red;
    visibility:hidden;
    font-size:20px;
    overflow:hidden;
    position:absolute;
    top:-20px;
}
.leftname{
    border-right:1px solid #eaeaea;
}
    

<div class="existing_items">
<table cellspacing="0">
    <th class="pointer"colspan="2"><span>^</span></th>
    <tr><th class="" colspan="2">Title</th></tr>
    <tr><td class="leftname">name</td><td>name</td></tr>
    <tr><td class="leftname">type</td><td>type</td></tr>
</table>
</div>