默认不显示，鼠标悬停可见

Question

这是标题 DIV 的 CSS：

#header { 
  display: block;
  float: left;
  min-width: 100%;
  min-height: 170px;
  height: auto; 
  background-color: #030309; 
  background-color: #191718; 
  position:fixed; 
  margin-top: -210px; 
  z-index: 999999; 
  opacity:.76;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  -ms-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
  top: 0;
}

这是悬停状态：

#header:hover { 
  display:block; 
  opacity:1;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  -ms-transition: opacity 1s ease-in-out;   
  transition: opacity 1s ease-in-out;
}

我想要做的是，默认情况下隐藏标题并在悬停时显示。我尝试在#header 上添加display: none 和在#header:hover 上添加display:block;，但它不起作用。 我也尝试过在#header 上使用opacity:0; 和在#header:hover 上使用opacity:1; 但这不行，因为标题下方的内容保持固定并且从页面顶部看不到。

有什么建议吗？

Answer 1

首先，您有一个 margin-top:-210px 导致标题不可见，但您永远不会在悬停时将其向下移动到 0。把它拿出来。然后您可以将opacity 正常设置为 0，悬停时设置为 1，它会在悬停时淡入。

DEMO

或者，如果您希望它向下滑动，请将转换从仅 opacity 更改为 all 并将 top:0 设置为 :hover 状态。您还需要设置一个大于负上边距的高度，以便元素的一部分可见，以便用户可以将鼠标悬停在它上面。我将其设置为220px。

CSS 的相关变化：

#header {
    top:-210px;
    height: 220px;
    -webkit-transition:all 1s ease-in-out;
    -moz-transition:all 1s ease-in-out;
    -o-transition:all 1s ease-in-out;
    -ms-transition:all 1s ease-in-out;
    transition:all 1s ease-in-out;
}

#header:hover {
    opacity:1;
    top:0px;
    -webkit-transition:all 1s ease-in-out;
    -moz-transition:all 1s ease-in-out;
    -o-transition:all 1s ease-in-out;
    -ms-transition:all 1s ease-in-out;
    transition:all 1s ease-in-out;
}​

DEMO

Answer 2

您正在尝试做的事情没有意义 - 您的标题一开始是不可见的，因此无法悬停。这就是它不会显示的原因。

你可以做的是：

• 最初隐藏块，就像你做的那样。
• 用另一个元素包裹#header 元素。假设您使用 id #header-container 对其进行标记。
• 使用 CSS：#header-container:hover #header { display: block; }

这将允许您向hover 的客户端提供一个元素，以便在最初隐藏#header 时显示它。

Answer 3

“display: none;”表示该元素已从文档流中删除，因此不可能有 :hover 状态，因为没有任何东西可以悬停。

您是否考虑改用visibility: hidden;（实际上与opacity: 0; 相同）？

尝试将 outline: 添加到您的 CSS 以帮助您在文档视口中看到该框，以便您确定将鼠标悬停在它上面。