1

我正在尝试创建一个半透明的粘性 CSS 菜单，以允许通过它看到文本。当用户将鼠标悬停在菜单上时，我添加了一个:hover {opacity:1;}使其不透明，但是，这是一个相当“课程”的变化；对这些过渡进行动画处理会很棒，无论是在第一次变为透明时，然后在返回不透明时。

我使它工作的方式是fixed当窗口位置超出我的标题 div 的高度时，使用 jquery 向 body 标记添加一个类。您可以在这里看到它的实际效果。

我假设悬停过渡是一个 css3 动画，但到目前为止我还不能让它工作。添加类引起的初始转换——我什至不知道从哪里开始！

任何帮助，将不胜感激。

解决方案 CSS3 解决方案从下面标记的答案中提取和修改。我将过渡效果从.fixed header nav移至header nav。这会导致在fixed添加或删除类时动画工作。此处更新解决方案：小提琴

4

3 回答 3

1

CSS：

body.fixed nav{
    position:fixed;
    top:0px;
    opacity:0.6;
    transition: 1s opacity;
    -webkit-transition: 1s opacity;
    -moz-transition: 1s opacity;
    width:100%;
}
body.fixed nav:hover{
    opacity:1;
    transition: 1s opacity;
    -webkit-transition: 1s opacity;
    -moz-transition: 1s opacity;
}

小提琴：http: //jsfiddle.net/sTCqq/1/

于 2013-04-23T21:46:53.690 回答
0

您可以结合 jQuery.hover()和.animate()方法来执行此操作：

$('header').hover(function(){
   $(this).animate({
    opacity: 1 }, 1000);
}, function(){
    $(this).animate({
    opacity: 0.6 }, 1000);
});

Jsfiddle 示例

于 2013-04-23T21:51:26.343 回答
0

您可以将 CSS 的特定部分修改为 

.fixed
{
    header nav
    {
        transition: 0.5s opacity;
        -webkit-transition: 0.5s opacity;
        -moz-transition: 0.5s opacity;
        position:fixed;
        top:0px;
        opacity:0.6;
        width:100%;
        &:hover{opacity:1;}
    }
}

看到这个小提琴演示

于 2013-04-23T21:59:30.833 回答