Javascript 如何更换移动设备的悬停

我尝试在移动设备上使用：active，但似乎不起作用。我可以用css来实现这一点，还是需要用javascript创建鼠标覆盖侦听器

#专业{
显示器：flex；
证明内容：周围的空间；
列表样式类型：无；
}
#minor1，#minor2{
显示：无；
}
#关于：悬停，#拍摄：悬停{
背景色:#538231；
颜色：白色；
}
#拍摄：悬停#minor2，#拍摄：活动#minor2{
显示器：flex；
位置：绝对位置；
证明内容：开始；
左：0；
列表样式类型：无；
背景色:#538231；
颜色：白色；
宽度：100%；
}
#关于：悬停#minor1，#关于：活动#minor1{
显示器：flex；
位置：绝对位置；
证明内容：开始；
左：0；
列表样式类型：无；
背景色:#538231；
颜色：白色；
宽度：100%；
}
#导航栏{
位置：相对位置；
字体大小：3.5vw；
颜色:#538231 ;；
背景色：#b3d7f7；
}
李{
边距：0！重要；
}
#李少民{
左边距：3vw！重要；
}
#李小二{
左边距：1vw！重要；
保证金权利：5vw！重要；
}

家
关于我们

我们的故事
我们的工作
党羽领袖
在新闻中


历法
采取行动

介入
捐赠


资源

如果我必须只使用纯HTML和CSS，我有两个选择

首先是在li标签上放置一个属性

tabindex=“0”

，然后在css上添加

：focus

选择器。但问题是，您必须单击其他地方才能显示子菜单

第二个是有一个复选框来适应单击/取消单击事件。我刚刚为mobile view做了一个例子，@media query最大宽度：800px。因此，请在选中此项时调整浏览器的大小

请在下面检查我的代码：

#专业{
显示器：flex；
证明内容：周围的空间；
列表样式类型：无；
}
#minor1，#minor2{
显示：无；
}
#关于：悬停，#拍摄：悬停{
背景色:#538231；
颜色：白色；
}
#拍摄：悬停#minor2，#拍摄：活动#minor2{
显示器：flex；
位置：绝对位置；
证明内容：开始；
左：0；
列表样式类型：无；
背景色:#538231；
颜色：白色；
宽度：100%；
}
#关于：悬停#minor1，#关于：活动#minor1{
显示器：flex；
位置：绝对位置；
证明内容：开始；
左：0；
列表样式类型：无；
背景色:#538231；
颜色：白色；
宽度：100%；
}
#导航栏{
位置：相对位置；
字体大小：3.5vw；
颜色:#538231 ;；
背景色：#b3d7f7；
}
李{
边距：0！重要；
}
#李少民{
左边距：3vw！重要；
}
#李小二{
左边距：1vw！重要；
保证金权利：5vw！重要；
}
输入[type=“checkbox”]{
位置：绝对位置；
不透明度：0；
}
@仅介质屏幕和（最大宽度：800px）{
#关于输入[type=“checkbox”]：选中~label，#接受输入[type=“checkbox”]：选中~label{
背景色:#538231；
颜色：白色；
}
#关于输入[type=“checkbox”]：选中~ul，#接受输入[type=“checkbox”]：选中~ul{
显示器：flex；
位置：绝对位置；
证明内容：开始；
左：0；
列表样式类型：无；
背景色:#538231；
颜色：白色；
宽度：100%；
}
}

家

关于我们

我们的故事
我们的工作
党羽领袖
在新闻中


历法

采取行动

介入
捐赠


资源

可以使用

：focus

或使用javascript。您希望实现什么？移动屏幕没有鼠标，所以鼠标悬停没有多大意义。

：鼠标悬停实际上应该可以在触摸设备上工作（至少在我的移动Safari测试中是这样）。我用jfiddle运行了代码，它成功了。从技术上讲，这里没有悬停，但是如果点击了某个东西，它会假设它是：悬停。注意：焦点不起作用，我试图让子菜单在你触摸lino时显示，在iphone上悬停什么也不做