CSS轉換影響框可訪問性/鼠標敏感

我有一個用戶界面的情況下，我重新創建in this jsFiddle。請看一看。。CSS轉換影響框可訪問性/鼠標敏感

基本上，box元素應該總是重疊的所有其他人時，它是可見的（當其父field處於狀態:hover這似乎做工精細，視覺上 - 但要儘量在box元素移動你的鼠標，而它仍然是在過渡。你會發現，父元素的:hover變得過時，導致box再次關閉。

不過，如果你稍等片刻時間越長，向下（過渡結束前不久或一次移動鼠標之前它會完成），您將看到box保持打開狀態。

我做了測試修改z-index，甚至試圖使z-index過渡的一部分，但無濟於事。問題依然存在。

這是怎麼發生的？

，我怎麼能修改的方式，box將在:hover在field使用給定的CSS過渡fluid打開，但被完全訪問（最前面）從最初一刻過渡開始CSS定義？

注：

我只需要這在Chrome工作完全。

在我的生活環境中，我使用了一個更快的轉換，但是在這個例子中我使用了更長的時間，因爲它更容易測試。

我通過在每個字段元素上應用下降的z-index來解決此問題，但我不喜歡這種方法，因爲它是解決方法，而不是解決方案。

來源

2014-03-04 SquareCat

給父母.field:hover { z-index:1; }並將.field > .box { position: absolute; ... }更改爲.field > .box { position: relative; ... }。這是不是從頁面的流量取出盒子，並允許每個field被放置在他人徘徊

Demo

來源

2014-03-04 22:13:47

對不起時，我花了一段時間 - 我是相當繁忙大氣壓。非常感謝您的盛情投入！它看起來很有希望，至於這個問題，考慮到小提琴中提供的確切代碼，它絕對是一個解決方案。將示例代碼放在一起時我犯了一個錯誤。有兩個問題：1）我的實際用戶界面環境中的'.field'容器沒有固定的高度。這些字段可以具有可變高度。 2）'.box'元素應該總是與整個'.field'對象重疊，並且始終從0px頂部位置開始（因此完全覆蓋它）。 – SquareCat

你可以考慮接受你的答案，因爲它符合我的要求。但爲了不必提出一個新問題，我希望你對我如何使上述改變有所瞭解有所瞭解。 – SquareCat

你知道什麼有趣嗎？我剛剛在我的現場環境中將'position：relative'改回''position：absolute''，而留下您提供的其他修改。看到這裏 - 它的作品！我幾乎不能相信它。我以爲我有這個測試。我會再檢查一下，但它似乎很好！ – SquareCat

CSS轉換影響框可訪問性/鼠標敏感

回答

相關問題