Question

我的网站上有以下浮动菜单：

$(function() {
    var nav = $('nav');
    var nava = $('nav a');
    /* var navaOnHover = $('nav a:hover'); */
    var navHomeY = nav.offset().top;
    var isFixed = false;
    var $w = $(window);
    nav.css({ background: '#222' });
    $w.scroll(function() {
        var scrollTop = $w.scrollTop();
        var shouldBeFixed = scrollTop > navHomeY;
        if (shouldBeFixed && !isFixed) {
            nav.css({
                transition: 'all 0.30s ease-in-out',
                position: 'fixed',
                top: 0,
                left: nav.offset().left,
                width: nav.width(),
                height: 59,
                background: '#315d90'
            });
            nava.css({
                color:'#fff'
            });
            /* navaOnHover.css({
            color:'#000'
            }); */
            isFixed = true;
        }
        else if (!shouldBeFixed && isFixed)
        {
            nav.css({
            height: 50,
                position: 'static',
                background:'#222'
            });
            nava.css({
                color:'#fff'
            });
            /* navaOnHover.css({
            color:'#000'
            }); */
            isFixed = false;
        }
    });
});

在第四，二十一和四十一行（用/ *开头标记，最后用* /标记）我试图得到nav a:hover当菜单浮动时鼠标悬停。
现在这不起作用，变量navaOnHover没有得到nav a:hover值如何以这种方式或其他方式使其工作？
这很重要，因为如果您向下滚动并稍后向上移动，hover设置会发生变化，如果您悬停或不悬停，则颜色#fff会保留。

如果我不清楚，请查看 demo - 向下滚动页面，然后向上滚动。

感谢。

Answer 1

试试这个：

<script type="text/javascript">
$(document).ready(function(){
    $(function() {
        var nav = $('nav');
        var nava = $('nav a');
        var navHomeY = nav.offset().top;
        var isFixed = false;
        var $w = $(window);
        nav.css({ background: '#222' });
        $('nav a').hover(function(){
             $(this).css({'color':'black'})
             },function(){
                $(this).css({'color':'white'}) 
        })
        $w.scroll(function() {
            var scrollTop = $w.scrollTop();
            var shouldBeFixed = scrollTop > navHomeY;
            if (shouldBeFixed && !isFixed) {
                nav.css({
                    transition: 'all 0.30s ease-in-out',
                    position: 'fixed',
                    top: 0,
                    left: nav.offset().left,
                    width: nav.width(),
                    height: 59,
                    background: '#315d90'
                });
                isFixed = true;
            }
            else if (!shouldBeFixed && isFixed)
            {
                nav.css({
                height: 50,
                    position: 'static',
                    background:'#222'
                });
                isFixed = false;
            }
        });
    });})
</script>

Answer 2

您无法在jQuery中使用:hover选择元素，这就是您的代码错误的原因。

如果您需要两个/更多条件悬停状态元素，请准备两个/更多css类并以css样式编写自己的:hover。在jQuery更改类中，根据您的条件，:hover将自动应用。

浮动菜单jquery悬停

2 个答案: