Jquery删除悬停类

Question

我已经创建了一个 html 表来表现得像一个菜单。它在页面加载时效果很好。但是，在选择了某个菜单项后，悬停类对任何菜单项都不起作用。

JQuery:

$('.menuItem').click(function () {
    $('.menuItem').css({ "background-color": "#e56d15", "border-radius": "6px", "border": "1px solid #e56d15", "color" : "white"});

    $(this).css({ "background-color": "#f0cc5e", "color": "#552604", "border": "1px solid white" });
        // Display correct section of page
        switch ($(this).attr('id')) {
            case "miHome":
                $('.subPages').each(function () {
                    $(this).hide();
                });
                $('#pgHome').show(1000);
                break;
            case "miAbout":
                $('.subPages').each(function () {
                    $(this).hide();
                });
                $('#pgAbout').show(1000);
                break;
            case "miMembers":
                $('.subPages').each(function () {
                    $(this).hide();
                });
                $('#pgMembers').show(1000);
                break;
            case "miEvents":
                $('.subPages').each(function () {
                    $(this).hide();
                });
                $('#pgEvents').show(1000);
                break;
            case "miFGal":
                $('.subPages').each(function () {
                    $(this).hide();
                });
                $('#pgFGal').show(1000);
                break;
            case "miVGal":
                $('.subPages').each(function () {
                    $(this).hide();
                });
                $('#pgVGal').show(1000);
                break;
            default:
                //$('.subPages').hide();
                //$('#pgHome').show();
                break;
        }
    });

这里是 HTML：

            <table class="horCellSpacing">
                <tr>
                    <td class="menuItem" id="miHome">Home</td><td class="menuItem" id="miAbout">About Us</td><td class="menuItem" id="miMembers">Members</td>
                    <td class="menuItem" id="miEvents">Events</td><td class="menuItem" id="miFGal">Photo Gallery</td><td class="menuItem" id="miVGal">Video Gallery</td>
                </tr>
            </table>

这是 CSS：

.menuItem {
    font-size: small; text-align: center; min-width: 100px; padding: 5px 15px 5px 15px; transition-duration: 0.5s;
    background-color: #e56d15; border-radius: 6px; border: 1px solid #e56d15; transition-property: all;
    box-shadow: 0px 0px 1px 1px #ffc194, inset 0px 0px 10px 3px #ffab6d;
}
.menuItem:hover {
    cursor: pointer; background-color: #f0cc5e; border: 1px solid white; color: #552604; font-weight: 400;
}

Answer 1

尝试使用toggleClass：

JSFiddle

JQuery：

$('.menuItem').click(function () {
    $(this).toggleClass('active');
});

CSS

.active{
    cursor: pointer; background-color: #f0cc5e; 
    border: 1px solid white; 
    color: #552604; 
    font-weight: 400;
}