javascript - 触发 CSS :hover with javascript by scrolling

Question

我在一个网站上工作，网站顶部有固定菜单。如果您将鼠标悬停在导航栏上，它会向下移动以显示链接。悬停是通过 css 类实现的。

当您进入网站或滚动到顶部时，导航应完整显示。

我正在尝试使用与滚动进度一起使用的 javascript 方法来实现它。

$(window).scroll(function() {
	var wS = $(this).scrollTop();
	if (wS > 200){         
		alert('you have scrolled to the h1!');
                $document.getElementById('awning').addClass('awning:hover');
   	        $document.getElementById('nav').addClass('awning:hover #nav');
     }
});

这样做是否有意义，或者有更好的方法吗？

警报甚至没有出现

Answer 1

您不能分配 pseudo-classes像这样。伪类用于在出现特殊状态(例如悬停在元素上、链接已被访问)或元素某种特殊(首创，甚至等)时定义元素的样式。

你必须像这样在 css 中创建额外的类:

#awning.revealed{ /* notice there is no space between selectors */
    /*your css code goes here (same as in :hover)*/
}

然后像这样向元素添加类:

 $document.getElementById('awning').addClass('revealed');