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'切換錯誤？

回答

相關問題