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

几个月来，我用CSS3 +选择器将CSS应用到某些元素。Chrome中的CSS3 +'display'切换错误？

在IE和徘徊编辑图标会显示菜单时，旧版本的浏览器，但在最新版本的Chrome浏览器默认情况下它不会。但是，当通过开发工具中的“元素”选项卡手动切换“显示”时，它可以正常工作。这是Chrome的错误吗？或者他们是否为此推出了新系统？

有问题的行是：

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

来源

2014-04-03 user3420034

演示是越野车即使在FF（好吧，在Chrome中并没有显示出来） –

@ RokoC.Buljan为了演示的目的，我简化了它。目前它只显示悬停在编辑图标上的菜单（在菜单上悬停时消失）。我只是添加了另一行CSS来改进它。 – user3420034

+1玩耍，仍然没有运气。好问题！ –

的问题是，display:hidden;到display:block所述反复被停止悬停事件父元素的传播史为一些未知的原因。如果您使用Chrome开发工具并强制将鼠标悬停在父元素上，它就可以工作。

因此，最简单的修复方法是将visibility:hidden切换为visibility:visible以获取右侧的图标（同时切换光标）。这解决了Chrome中的问题，并且对其他浏览器也一样。唯一的区别：隐藏

Demo

由于ROKO显示了当对象仍然会影响你的布局，还有，如果你改变你的HTML允许的display的触发正常工作的一种方式，但我认为它会是一个好主意，通知Chrome的家伙反正

来源

2014-04-04 00:35:54

正确的方式做到这一点：
不要使用嵌套:hover比尝试目标>（儿童）或+（下一个兄弟）的元素。

正确地维护它绑定到一个共同的父元素的悬停状态，

<grandparent>  // hover triggers 'parent' to show up 

    <UI image> 

    <parent>  // initially hidden, hover triggers HIDDEN to show up! 
     <UI icon> 
     <HIDDEN until PARENT is hovered> 
    </parent> 

</grandparent>

LIVE DEMO

<div class="feed_photo_portrait"> 

    <img src="//placehold.it/150x110/cf5&text=IMAGE"> 
    <div class="edit"> 
    <img class="edit-ico" src="//placehold.it/50x50/f0f&text=EDIT" > 
    <ul class="edit-options"> 
     <li><a href="#">Make Profile Picture</a></li> 
     <li><a href="#">Delete This Photo</a></li> 
    </ul> 
    </div> 

</div>

CSS：

.feed_photo_portrait{ 
    background:#eee; 
} 
.edit{ 
    position:absolute; 
    display:none; 
    top: 20px; 
    right: 10px; 
} 

.feed_photo_portrait:hover > .edit{ 
    display:block; 
} 

.edit-options{ 
    display:none; 
    background:#fff; 
    position: absolute; 
    width: 115px; 
    top: 12px; 
    right: 8px; 
} 

/* Don't use .edit-ico for the hover but the common parent .edit */ 
.edit:hover > .edit-options{ 
    display:block; 
}

来源

2014-04-04 00:38:54

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

回答

相关问题