Jquery删除悬停类

Posted 2023-02-16

【中文标题】Jquery删除悬停类

【英文标题】：Jquery deleting hover class

【发布时间】：2014-05-22 12:53:43

【问题描述】：

我已经创建了一个 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;

【问题讨论】：

那是因为您将 css 设置为按钮。尝试设置另一个类并在 css 中设置它的样式。

【参考方案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;

【讨论】：

感谢您的解决方案。但是，它没有按预期工作。我不明白为什么，menuItem:hover 类正在取消注册。以及如何将其链接回 menuItems

我们不能这样做吗：$('.menuItem:hover').css( "background-color": "#f0cc5e", "border-radius": "6px", "border": "1px solid #e56d15", "color" : "#552604");

如果您观察，您的 JSFiddle 允许您同时显示多个活动项目。我们可以解决这个问题吗？