1

这是标题 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但它不起作用。我也尝试过on和on但它不行，因为标题下方的内容保持固定并且从页面顶部不可见。#headerdisplay:block;#header:hoveropacity:0;#headeropacity:1;#header:hover

一些建议？

4

3 回答 3

5

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

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

尝试添加outline:到您的 CSS 以帮助您在文档视口中查看该框，这样您就知道您确实将鼠标悬停在它上面。

于 2012-06-22T23:25:23.590 回答
2

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

演示

或者，如果您希望它向下滑动，请将转换从 just opacityto更改为all并将 a 设置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;
}​

演示

于 2012-06-22T23:27:25.170 回答
0

您正在尝试做的事情没有意义 - 您的标题起初不可见，因此无法悬停。这就是它不会出现的原因。

你可以做的是：

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

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

于 2012-06-22T23:27:29.923 回答