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

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;
}