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

我想做什么，所以标题默认隐藏，并在它悬停时出现。我已尝试在display: none和#header display:block;上添加#header:hover，但它无效。我也尝试使用opacity:0;上的#header和opacity:1;上的#header:hover，但这不好，因为标题下方的内容仍然是固定的，并且从页面顶部看不到

一些建议？

Answer 1

“display: none;”表示该元素已从文档流中删除，因此无法拥有：悬停状态，因为没有任何内容可以悬停。

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

尝试将outline:添加到您的CSS中，以帮助您查看文档视口中的框，以便您知道您肯定会将其悬停在它上面。

Answer 2

首先，您有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 3

你想做什么，没有意义 - 你的标题最初是不可见的，所以它不能徘徊。这就是它不会出现的原因。

你能做的是：

最初隐藏该区块，就像您一样。
用另一个元素包装#header元素。假设您使用ID #header-container标记它。
使用CSS：#header-container:hover #header { display: block; }

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

默认情况下显示none，鼠标悬停时可见

3 个答案: