在菜单打开的情况下保持链接处于非活动状态

因此，点击'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

来源

2013-08-29 user1393984

我更新了我的答案，它的工作原理 - 检查[小提琴]（http://jsfiddle.net/robschmuecker/dcRZA/1/） –

有一种方法，您需要编辑/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文件悬停属性和修改这个脚本

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-29 12:59:50

好吧，计算出来并且似乎都可以工作，但只能用一次？如果我点击关闭的菜单，然后尝试点击它再次打开，它不再起作用了吗？它也发生在jsfiddle中。 – user1393984

我更新了它，将我们正在寻找的类更改为'cbp-spmenu-open'它似乎现在一直在运行 –

完美，谢谢！ – user1393984

有点击，当你尝试创建一个特定的悬停样式，然后单击时应用该样式，必要时删除它？例如：

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

DEMO

来源

2013-08-29 12:40:15

似乎没有工作。只要光标移动（菜单打开），文本就会变回黑色。我需要它保持灰色，直到用户点击关闭菜单。 – user1393984

你有没有在我的文章中看到附带的jsFiddle？如果你将鼠标悬停在图标上，它将变成灰色，此时如果不点击，它将恢复为黑色。如果点击它，它将保持灰色，直到单击“someOtherContainer”。 –

一个想法是有

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

改为类似

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

，并在脚本中添加此的任何地方（DOM是后准备好）：

来源

2013-08-29 12:42:27 Sgoldy

对不起，我是一个有点写业务的业余爱好者。我需要什么JS代码才能实现这个功能？ – user1393984

将CSS更改为我所建议的内容，并将脚本行（新编辑的）添加到页面中的脚本中。 – Sgoldy

谢谢！虽然似乎没有工作。 :(当菜单被打开并且用户移动它们的光标时，它仍然返回到黑色 – user1393984

在菜单打开的情况下保持链接处于非活动状态

回答

相关问题