爲什麼我不能懸停下列固定元素？

爲了說明：的.chapter-list爲什麼我不能懸停下列固定元素？

enter image description here

CSS：

.chapter-list, 
.chapter-actions, 
.chapter-words, 
.current-book-actions { 
visibility: hidden; 
} 
.chapter-list:hover, 
.chapter-actions:hover, 
.chapter-words:hover, 
.current-book-actions:hover { 
    visibility: visible; 
} 
.chapter-list { 
width: 200px; 
position: fixed; 
left: 30px; 
top: 30px; 
}

不管我用什麼樣的z-index，我無法徘徊.chapter-list。 .container根本沒有任何CSS，所以我不確定是什麼導致了這個問題。

編輯：

這是.chapter-form的CSS：

.chapter-form { 
margin: 30px auto 0; 
width: 45%; 
max-width: 640px; 
}

不知道如何可能會影響懸停，雖然。

來源

2014-10-30 alexchenco

您無法將其懸停，因爲您已將其隱藏起來與visiblity: hidden。

.chapter-list, 
.chapter-actions, 
.chapter-words, 
.current-book-actions { 
visibility: hidden; 
}

隱藏的元素仍佔用文檔中的空間，但您無法看到它們或與它們進行交互。這就是爲什麼你仍然可以看到元素在開發人員工具中使用的空間。

編輯 - 假設你想擁有最初是隱藏的則有它出現在懸停（這似乎是一個很奇怪的相互作用）的元素，你可以這樣做：

.chapter-list, 
.chapter-actions, 
.chapter-words, 
.current-book-actions { 
    opacity: 0; 
} 

.chapter-list:hover, 
.chapter-actions:hover, 
.chapter-words:hover, 
.current-book-actions:hover { 
    opacity: 1; 
}

來源

2014-10-30 14:14:49

那麼，有什麼解決辦法？ – alexchenco 2014-10-30 14:17:38

@alexchenco你爲什麼隱藏它？如果不希望元素被隱藏，您可以刪除該CSS。 – 2014-10-30 14:18:46

我想要做的是隱藏一個工具欄，並且只在用戶懸停該區域時才顯示它。所以他可以擁有一個無分心的環境。 – alexchenco 2014-10-30 16:04:53

爲什麼我不能懸停下列固定元素？

回答

相關問題