0

因此，当单击“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

4

3 回答 3

1

一个想法是拥有

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

改成类似的东西

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

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

$(".logo button").click(function () { $(this).toggleClass("active_button"); })
于 2013-08-29T12:42:27.503 回答
0

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

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

演示

于 2013-08-29T12:40:15.793 回答
0

有一种方法，您需要编辑/js/classie.js文件。我在这里有一个工作小提琴

具体来说： 

//...
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();
});
于 2013-08-29T12:59:50.697 回答