CSS3 + 'display' 切换 Chrome 中的错误？

Question

几个月来，我一直在使用 CSS3 + 选择器将 CSS 应用于某些元素。

这是我的使用演示:http://jsfiddle.net/HB5Bz/2/

在 IE 和旧版本的 Chrome 中，当鼠标悬停在编辑图标上时，它会显示菜单，但在最新版本的 Chrome 中，默认情况下不会显示。但是当通过开发工具中的“元素”选项卡手动切换“显示”时，它工作正常。这是 Chrome 的错误吗？还是他们为此引入了新系统？

有问题的行是:

#profile_feed_post_edit:hover + .profile_feed_post_edit_menu {
    display: block;
}

Answer 1

问题是 display:hidden; 到 display:block 的切换正在停止将悬停事件传播到父元素，原因不明。如果您进入 Chrome 开发工具并强制将鼠标悬停在父元素上，它就会起作用。

因此，最简单的修复方法是将右侧图标的 visibility:hidden 切换为 visibility:visible(同时切换光标)。这解决了 Chrome 中的问题，对其他浏览器同样有效。唯一的区别:对象在隐藏时仍会影响您的布局

Demo

如 Roko 所示，如果您更改 HTML 以允许切换 display 正常工作，则有一种方法，但我认为无论如何通知 Chrome 人员是个好主意