显示无可见的鼠标悬停

这是头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:block;上#header:hover添加display: none但它不工作。我也试过和opacity:1;上opacity:0;#header:hover但它不好，因为标题下方的内容保持不变，并且从页面顶部不可见。

一些建议吗？

来源

2012-06-22 Cristocea Costel

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

DEMO

另外，如果你想让它滑下，改变从刚刚opacity过渡到all，并在:hover状态设置top:0。您还需要设置的高度比负上边距更大，因此元素的一部分将是可见的，所以用户可以在其上徘徊。我将它设置为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

来源

2012-06-22 23:27:25 sachleen

我已经尝试了你的代码，但我有同样的问题，它仍然是空的标题和内容之间的空白。你可以查看[这里]（http://whiteandgold.ro/ipp/） –

尝试第二个演示。 – sachleen

“display: none;”表示元素已从文档流中移除，因此无法悬停，因此无法设置：悬停状态。

你在想的visibility: hidden;（实际上是相同的opacity: 0;）呢？

尝试将outline:添加到您的CSS中，以帮助您在文档视口中看到该框，以便您知道您确实在其上方悬停。

来源

2012-06-22 23:25:23 Dai

我用可见性试过了：hidden;但它仍然是空的空间，我不想这样，你可以检查[这里]（http://whiteandgold.ro/ipp/） –

你正在尝试做的，没有意义的 - 你的头是不可见的，在第一，所以它不能徘徊。这就是为什么它不会出现。

你可以做的是：

隐藏块开始，像你这样。
用另一个元素包装#header元素。比方说，你与ID #header-container标记它。
使用CSS：#header-container:hover #header { display: block; }

这将允许你在为了显示#header上提供了客户端hover的元素，而最初隐藏它。

来源

2012-06-22 23:27:29

显示无可见的鼠标悬停

回答

相关问题