Question

所以，当点击'KH'徽标时，我有一个从左侧推出的菜单。当'KH'悬停在上面时，它会变成浅灰色。

点击“KH”并且用户移动鼠标后，它将返回活动状态黑色。

有没有办法在菜单打开的整个时间内将'KH'保持在浅灰色，只有在用户关闭菜单后才会回到黑色？

HTML：

<div class="logo"><button class="one toggle-menu menu-left push-body">KH</button></div>

CSS：

button.one {
border : 0px;
background: #f4f4f4;
font-family: "bebas-neue", sans-serif;
font-size: 3em;
color: #272727;
font-weight: 400;
padding-bottom: 15px;
letter-spacing: 1px;
text-decoration: none;
-webkit-transition: all 0.8s ease-in-out;
-moz-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
cursor: pointer;
}

button.one:active { color: #ccc; }

button.one:hover { color: #ccc; cursor: pointer; }

网站：http://kaye.at/babyboom.php

Answer 1

一个想法是

button.one:active { color: #ccc; }

改为

button.one:active, .button_active { color: #ccc; }

并在脚本中的任何位置添加它（在dom准备好之后）：

$(".logo button").click(function () { $(this).toggleClass("active_button"); })

Answer 2

您是否尝试在单击时创建悬停特定样式，然后在单击时应用此样式，并在必要时将其删除？例如：

button.one.hover,
button.one:hover {
    color: #ccc;
    cursor: pointer;
}

DEMO

Answer 3

有一种方法，您需要编辑/js/classie.js文件。我有working fiddle here

具体来说：

//...
var jPushMenu = {
            close: function (o) {
                $('.jPushMenuBtn,body,.cbp-spmenu').removeClass('disabled active cbp-spmenu-open cbp-spmenu-push-toleft cbp-spmenu-push-toright');
                                // Add the below line
                                $('button.one').css('color', '#272727');
            }
        }

然后还从css文件中删除：hover属性并修改此脚本

jQuery(document).ready(function () {
    $('button.one').on('mouseover', function () {
        $(this).css('color', '#CCC');
    });
    $('button.one').on('mouseout', function () {
        if ($('.cbp-spmenu-open').length == 0) {
            $(this).css('color', '#272727');
        }
    });
    $('.toggle-menu').jPushMenu();
});

菜单打开时将链接保持在非活动状态

3 个答案: