CSS 悬停以在同级 div 上显示按钮

Question

我需要能够在过滤器文本(在 id=filter-text 的 div 中，通常以 visibility:hidden 隐藏)悬停时显示删除按钮(在 id=fdib 的 div 中)。

<table>
    <tr>
        <td>
            <div id="filter-text">
                <angular-tag align="'left'" text="filterModel.text"></angular-tag>
            </div>
        </td>   
        <td>
            <div id="fdib" class="fdib">
                <input id="delete-input-btn" type="button" title="Delete"/>
            </div>
        </td>
    </tr>
</table>

什么 CSS 可以实现这一点？我最初拥有以下 CSS 之前有它并且它工作但我必须使用表格来使网站工作，并且 .sidebar 位于表格之外的另一个 div 上。

.sidebar:hover .filter-delete-btn {
    visibility: visible;
}

Answer 1

你不能做那个需要的后退，因为它在 td 内，你能做的最好的事情就是将 :hover 事件隐藏到 td 然后看起来像这样:

td:hover + td div#fdib #delete-input-btn {
   visibility: visible;
}

演示 http://jsfiddle.net/6st2g/6/ .

PD:另外你的标题是错误的，因为他们不是 sibling