Question

我需要能够显示删除按钮（在id为id = fdib的div中），当过滤器文本（在div中具有id = filter-text，通常隐藏的可见性：隐藏）悬停在上面时。

<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：你的头衔也是错的，因为他们不是兄弟姐妹

Answer 2

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

CSS悬停在兄弟div上显示按钮

2 个答案: