html - 为什么我不能悬停以下固定元素？

Question

举例说明:

.chapter-list 的 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;
}

但不确定它会如何影响悬停。

Answer 1

你不能悬停它，因为你已经用 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;
}