Javascript 强制CSS:hover在转换后更新的变通方法（打开菜单）

已经有几个问题在解决这个问题。我把我的包括在内有两个原因：

• 它提出了一个可能的替代解决方案
• 演示代码可能对其他想要模拟菜单的人有用

在

CSS转换后

，用户必须移动鼠标，然后鼠标下方的元素才会注意到它处于

：悬停

状态。我创建了一个类似于菜单的功能，可以通过幻灯片打开来显示不同的选项。开始过渡结束时鼠标下的选项与过渡开始时鼠标下的选项不同。因此，我不得不找到一个解决办法

您可以在下面找到一个和演示源。查找变通方法（在三个位置）以查看我所做的工作

要查看问题，请将鼠标移到菜单上，然后将其留在原位，而不移动它。浏览器认为是

：hover

的列表项将以蓝色显示。我的变通方法使用

li.ignoreHover

类否决了

li:hover

规则。为了使解决方案不可见，我可以简单地使用标准背景色。相反，我使用蓝色使问题可见

我的问题：我注意到按其中一个修改键（大写、大写锁定、Ctrl、Option/Alt、，⌘ 在Mac上，…）还将强制更新

：hover

状态。是否有方法将此类事件发送到

#菜单

元素

（我这样做的尝试没有成功，所以我宁愿给你我的工作解决方案，而不是一个可能无效的方案）

#菜单{
位置：相对位置；
背景：#ccc；
显示：内联块；
}
#包装纸{
保证金：5px；
}
#标志{
宽度：150px；
高度：50px；
边框：1px实心#000；
保证金：0px自动；
z指数：10；
}
导航{
宽度：100%；
溢出：隐藏；
文本对齐：居中；
高度：2米；
}
保险商实验室{
位置：相对位置；
显示：内联块；
保证金：0自动；
填充：0；
列表样式类型：无；
文本对齐：左对齐；
}
李{
显示：块；
保证金：0；
填充：0.25em0；
线高：1.5em；
}
美国航空航天局{
过渡：所有500ms线性1s；
}
#menu.hover ul，#menu.hover nav{
转换延迟：0s；
}
李:悬停,，
李.哈弗{
背景色：#999；
}
李。无知的人{
背景色：#ccf；/*一点蓝色，因此您可以看到它*/
}
.选定{
颜色：#fff；
}

注一
注二
注三
再也不是四个了
附注五
附注六

var test={}
;（函数createMenu（）{
var项目=3；
var=5；
var hover=“hover”//class
var$li=$（“li”）；
var$ul=$（“ul”）；
var$menu=$（“#menu”）；
var$nav=$（“nav”）；
var itemHeight=parseInt（$li.outerHeight（），10）；
var itemCount=$ul.children（）.length；
var menuWidth=$menu.outerWidth（true）；
var padding=（menuWidth-$ul.width（））/2；
var TransitionOne=false；
var mouseOver=false；
var-top；
//填充列表项以填充菜单的宽度
if（padding

要获取

：在元素设置动画时悬停它的状态

从CSS中删除
：悬停
，然后

创建一个类
。使用所需样式悬停
。使用jQuery切换
。悬停
：

$links.hover(function(){
  $(this).toggleClass("hover");
});

现在回到您的问题：

为了在菜单打开后突出显示正确的元素

我们需要始终知道鼠标的Y位置：

var mouseY = 0; // Needed to know the mouse position when menu is opening
$(document).on("mousemove", function( e ){
    mouseY = e.clientY; // Update the Y value
});

现在，在折叠菜单悬停时，使用jQuery设置菜单动画，

在
动画步骤回调中
获取每一帧的每个链接位置，
.filter（）
通过定位与鼠标位置匹配的链接位置来过滤它们。

最后应用
.hover
var mouseY = 0; // Needed to know the mouse position when menu is opening
$(document).on("mousemove", function( e ){
    mouseY = e.clientY; // Update the Y value
});

function openMenu() {
  $navUl.stop().animate({top: 0});
  $nav.stop().animate({height: linkH*nLinks}, {
    duration: 600,
    step: function( menuHeight ){
        // keeps removing and adding class during the animation time.
        // (it's an overkill but no other solution to that issue so far)
        $links.removeClass("hover").filter(function(i, e){
          var t = e.getBoundingClientRect().top;
          return mouseY > t  &&  mouseY < t+linkH;
        }).addClass("hover"); // only to the link returned by `.filter()` condition
    }
  });
}