按下键恢复到未悬停的CSS

Question

我有一个元素，当你把鼠标悬停在它改变css，我已经添加了一个onkeydown函数，恢复到原来的css。我只是想知道是否有办法得到不悬停的css，而不把它全部写出来?

这是我的代码

            $(document).keydown(function(e) {
            if (e.keyCode == 27) {
                $(NBSmegamenu).css('display', 'none');}   // esc
                $(".dynamic-children").css('border-bottom-width','none');
                $(".dynamic-children").css('border-bottom-style','none');
                $(".dynamic-children").css('border-bottom-color','none');
                $(".HoverImg").remove();
                $("span.dynamic-children").css('background-position', 'right'); 
                $("span.dynamic-children").css('background-image', 'url("/Style%20Library/NBSImages/NBS_MegaMenuDownArrowRed.png")');
                $("span.dynamic-children").css('background-repeat', 'no-repeat');
                $(".NBSDirectoryDivLine").css('border','none');
}); 

Answer 1

你最好使用classes:

$(document).keydown(function(e) {
     if (e.keyCode == 27) 
       $(element).addClass(keyDownCssClass);
});

你只需要在键上移除它:

$(document).keyup(function(e) {
     if (e.keyCode == 27) 
       $(element).removeClass(keyDownCssClass);
});

Answer 2

您可以尝试将css添加为两个类。覆盖你在悬停类中需要的任何属性。确保悬停类是在未悬停类之后定义的，这样它就有了优先权。

在你的javascript简单地切换类打开/关闭。

$(文档).keydown(函数(e) {

        if (e.keyCode == 32) { // Space to hover
           $(NBSmegamenu).addClass('hover');
        }
        if (e.keyCode == 27) // Unhover
           $(NBSmegamenu).removeClass('hover');
        }