时间戳

首页 > 解决方案 > 我是把 :hover 放在 CSS 中，把 keypresses(TABs) 放在 Javascript 中，还是把它们结合起来，把两者都放在我的 Javascript 中？

jquery - 我是把 :hover 放在 CSS 中，把 keypresses(TABs) 放在 Javascript 中，还是把它们结合起来，把两者都放在我的 Javascript 中？

问题描述

我:hover是在 Javascript 中加入 CSS 和按键（TAB）还是将它们结合起来并放在我的 Javascript 中？

我正在开发自己的下拉菜单：CSS 和 TAB 中的样式以及 Javascript 中的 shift-TAB。

当我将鼠标悬停在下拉菜单、下拉菜单项和子菜单上时，一切正常......当我按下 TAB 或 shift-TAB 时，一切正常。

但是..如果我在开始TABbing后尝试悬停，代码会中断..例如，如果我首先在给定下拉菜单中的项目之间TAB，然后TAB到另一个主菜单，CSS的：悬停在前一个菜单上（我刚离开的那个）不再起作用。也就是之前的下拉菜单不再“滴”了。

HTML：

<li class="drop">
    1st menu
    <ul class="aMenu">   <!-- drop menu = .aMenu -->
        <li>
            Thank you!
        </li>
    </ul>
</li>
        
<li>
    2nd menu
</li>

CSS：

#menubar li:hover .aMenu {
    left: auto;
}

JAVASCRIPT：

用于tabindex=0兄弟姐妹和后代之间的 TABbing。

function showMenu($theMenu) {

    $theMenu.css("left", "auto");
        
    return $theMenu;   // for chaining
    
}


function hideMenu($theMenu) {

    $theMenu.css("left", "-99999px");
    
    return $theMenu;   // for chaining

}

关键点：当我在相邻菜单之间TAB 时，我调用hideMenu了我刚刚离开的上一个菜单。

开始编辑

我还没有弄清楚为什么我的 Javascript keypress(tabindex=0) 代码会干扰我的 CSS 悬停代码。

尽管有这种无知，我还是想出了如何规避我在按 TAB（shift-TAB）和鼠标悬停之间随机交替时遇到的问题。

我以前的 .CSS 是：

li:hover .aMenu {
    left: auto;
}

取而代之的是，我创建了一个通过以下方式安装的新功能 <body onload=" ... ">

好吧，实际上有 2 个函数，但让我们专注于：

function setupHoverOverDropMenu() {

    $("li.drop").on( {
        mouseenter: function() {
        //  alert("hover over drop-menu");
            
            if ($itsPrevDropMenu.length > 0) {
                hideMenu($itsPrevDropMenu);
                $itsPrevDropMenu = {};   // mark as hidden
            };
            
            $itsCurrDropMenu = $(this).find(".aMenu").first();
            $itsPrevDropMenu = $itsCurrDropMenu;   // for next time
            
            showMenu($itsCurrDropMenu);
        }, 
        mouseleave: function() {        
            // other Javascript code addresses on mouseleave
        }
    });   // on
    
}   // setupHoverOverDropMenu

在这个过程中我学到了很多；例如，on mouseenter并且on mouseleave本质上比使用:hover...更简洁！

（我在顶部提到的 WHY 仍然困扰着我……但后来）

标签： jquerycss

解决方案

推荐阅读