jquery - jQuery .hover 在 Chrome 或 Safari 中不起作用

Question

我在导航栏中有一些按钮，我想在悬停时突出显示，在 Firefox、IE 和 Opera 中运行良好，但在 Chrome 或 Safari 中则不行。已经搜索了一段时间，并且已经阅读了 stackoverflow 上的主题，但没有找到有效的解决方案。

的HTML：

    <div class="bgc dropshadow2" id="navbar" >
        <ul>
            <a href="" alt=""><li class="navButton"><span>Word</span></li></a>
            <a href="" alt=""><li class="navButton"><span>Word</span></li></a>
            <a href="" alt=""><li class="navButton"><span>Word</span></li></a>
            <a href="" alt=""><li class="navButton"><span>Word</span></li></a>
            <a href="" alt=""><li class="navButton marginLast"><span>Word</span></li></a>
        </ul>
    </div>

的CSS：

#navbar ul li {
float: left;
height: 24px;
width: 100px;
margin-left: 24px;
margin-right: 8px;
padding: 12px 12px 12px 12px;
text-align: center;
background: rgba(0, 0, 0, .2);

}

jQuery：

    $(function(){
        $('.navButton').hover( function(){
            $(this).css('background', 'rgba(0, 0, 0, .6)');
        },
        function(){
            $(this).css('background', 'rgba(0, 0, 0, .2');
        });
    });

Answer 1

你在这一行有一个错字—— $(this).css('background', 'rgba(0, 0, 0, .2');

改变：

$(this).css('background', 'rgba(0, 0, 0, .2');

至：

$(this).css('background', 'rgba(0, 0, 0, .2)');