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

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;on #headerand opacity:1;on #header:hover但它不好,因为标题下面的内容仍然是固定的,并且从页面顶部看不到.

一些建议？

Answer 1

" display: none;"表示元素已从文档流中删除,因此不可能具有:悬停状态,因为没有任何东西可以悬停.

您是否正在考虑visibility: hidden;(实际上相同opacity: 0;)？

尝试添加outline:到CSS中以帮助您查看文档视口中的框,以便您确定将其悬停在它上面.