0

我有一个导航菜单，它链接我在单击它们时修改的 css 属性。此外，当我单击除链接之外的任何内容时，它们的 css 属性会发生应有的变化。

但是在启动 jquery 之前，css psuedo:hover工作.cmNavItem a:hover正常，但在任何 jquery 函数运行后都不起作用？

这是我的代码：

<nav id="cmNavContainer"><!-- Start of side menu -->

    <ul id="cmNav">
        <li class="cmNavItem"><a href="#" id="navItem1">link 1</a></li>
        <li class="cmNavItem"><a href="#" id="navItem2">link 2</a></li>
        <li class="cmNavItem"><a href="#" id="navItem3">link 3</a></li>
        <li class="cmNavItem"><a href="#" id="navItem4">link 4</a></li>
        <li class="cmNavItem"><a href="#" id="navItem5">link 5</a></li>
    </ul>

</nav><!-- closes cmNav -->

CSS：

.cmNavItem a:link, .cmNavItem a:visited{
        border-bottom:1px solid #323233;
        border-top:1px solid #323233;
        line-height:30px;
        width:182px;
        display:block;
        margin-left:0;
        padding-left:10px;

        font-size:15px;
        font-family:arial,sans-serif;
        color:#fff;
        font-weight:bold;
    }
        .cmNavItem a:hover{
            border-bottom:1px solid #000;
            border-top:1px solid #2a2a2b;
        }

jQuery：

$(document).ready(function(){

    $(".cmNavItem a").on('click', function(){
        $(this).css({
        'border-bottom-color':'000',
        'border-top-color': '2a2a2b',

        });
        $(this).css('opacity','1').closest('.cmNavItem').siblings('.cmNavItem').find('a').css({
        'opacity': '0.3',
        'border-bottom-color': '323233',
        'border-top-color': '323233'
        });


    });

    $("#cmNavContainer").animate({left: 0}, 1000);


    $(document).on('click', function(e) {
        if ( ! $(e.target).closest('.cmNavItem').length ) {
            // you clicked anywhere but on an element inside #linkitem (or itself)
            $('.cmNavItem a').css({
            'opacity': '2',
            'border-bottom-color': '323233',
            'border-top-color': '323233'

            });
        }
    });

});

在 jquery 运行后，我需要做什么才能让 css:hover再次工作？

谢谢

4

1 回答 1

0

IMO 悬停效果仍然有效。顺便说一句，颜色#000、#2a2a2a、#323232 在 1px 行上可能看起来几乎相同。如果我将悬停边框颜色更改为更容易看到的颜色（比如说#0f0 和#f00），您可以看到悬停。

http://jsfiddle .net/2qfQH/

在 FF 20、Opera 12、Chrome 26、IE 10 上测试

于 2013-05-13T20:48:50.173 回答