如何替换移动设备的悬停答案

【问题标题】：How to replace hover for mobile device如何替换移动设备的悬停
【发布时间】：2019-11-15 11:02:28
【问题描述】：

我尝试将 :active 用于移动设备，但它似乎不起作用。我可以用 css 做到这一点，还是需要在 javascript 中创建 mouseover 监听器？

#major{
   display:flex;
   justify-content:space-around;
   list-style-type:none;
}

#minor1,#minor2{
   display:none;
}

#about:hover, #take:hover{
   background-color:#538231;
   color:white;
}


#take:hover #minor2, #take:active #minor2 {
   display:flex;
   position:absolute;
   justify-content:start; 
   left:0 ;
   list-style-type:none;
   background-color:#538231;
   color:white;
   width:100%;
}

#about:hover #minor1, #about:active #minor1{
   display:flex;
   position:absolute;
   justify-content:start; 
   left:0; 
   list-style-type:none; 
   background-color:#538231;
   color:white;
   width:100%;
}

#navbar{
   position:relative;
   font-size:3.5vw;
   color:#538231;
   background-color:#b3d7f7;
}

li{
   margin:0!important;
}

#minor1 li{
   margin-left:3vw!important;
}

#minor2 li{
   margin-left:1vw!important;
   margin-right:5vw!important;
}

<div id="navbar">
<ul id="major">
 	<li>HOME</li>
 	<li id="about">ABOUT US
<ul id="minor1">
 	<li>OUR STORY</li>
 	<li>OUR WORK</li>
 	<li>SWAG LEADERS</li>
 	<li>IN THE NEWS</li>
</ul>
</li>
 	<li>CALENDAR</li>
 	<li id="take">TAKE ACTION
<ul id="minor2">
 	<li>GET INVOLVED</li>
 	<li>DONATE</li>
</ul>
</li>
 	<li>RESOURCES</li>
</ul>
</div>

【问题讨论】：

可以使用:focus或者使用javascript。
你想达到什么目的？移动屏幕没有鼠标，所以 HOVER 没有多大意义。
:hover 实际上应该在触摸设备上工作（至少在我的移动 Safari 测试中）。我在 jfiddle 中运行了代码，它起作用了。从技术上讲，没有悬停，但如果点击了某些东西，它也会假定它是 :hover。
：焦点不起作用，我正在尝试在您触摸 li 时显示子菜单
不，在 iphone 悬停时什么都不做

标签： javascript css mobile hover

【解决方案1】：

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

首先是在 li 标签上添加一个属性tabindex="0" 然后在 css 上添加:focus 选择器。但是这样做的问题是您必须单击其他地方才能不显示子菜单。

其次是有一个复选框来容纳点击/取消点击事件。我只是为移动视图设置了一个示例，@media query of max-width: 800px。因此，请在检查时调整浏览器大小。

请检查我下面的代码：

#major{
   display:flex;
   justify-content:space-around;
   list-style-type:none;
}

#minor1,#minor2{
   display:none;
}

#about:hover, #take:hover{
   background-color:#538231;
   color:white;
}


#take:hover #minor2, #take:active #minor2 {
   display:flex;
   position:absolute;
   justify-content:start; 
   left:0 ;
   list-style-type:none;
   background-color:#538231;
   color:white;
   width:100%;
}

#about:hover #minor1, #about:active #minor1{
   display:flex;
   position:absolute;
   justify-content:start; 
   left:0; 
   list-style-type:none; 
   background-color:#538231;
   color:white;
   width:100%;
}

#navbar{
   position:relative;
   font-size:3.5vw;
   color:#538231;
   background-color:#b3d7f7;
}

li{
   margin:0!important;
}

#minor1 li{
   margin-left:3vw!important;
}

#minor2 li{
   margin-left:1vw!important;
   margin-right:5vw!important;
}

input[type="checkbox"] {
  position: absolute;
  opacity: 0;
}

@media only screen and (max-width: 800px) {
#about input[type="checkbox"]:checked ~ label, #take input[type="checkbox"]:checked ~ label {
  background-color:#538231;
  color:white;
}

#about input[type="checkbox"]:checked ~ ul, #take input[type="checkbox"]:checked ~ ul {
  display:flex;
  position:absolute;
  justify-content:start; 
  left:0; 
  list-style-type:none; 
  background-color:#538231;
  color:white;
  width:100%;
}
}

<div id="navbar">
<ul id="major">
 	<li>HOME</li>
  <li id="about">
    <input type="checkbox" id="check">
    <label for="check">ABOUT US</label>
<ul id="minor1">
 	<li>OUR STORY</li>
 	<li>OUR WORK</li>
 	<li>SWAG LEADERS</li>
 	<li>IN THE NEWS</li>
</ul>
</li>
 	<li>CALENDAR</li>
 	<li id="take">
    <input type="checkbox" id="check2">
    <label for="check2">TAKE ACTION</label>
<ul id="minor2">
 	<li>GET INVOLVED</li>
 	<li>DONATE</li>
</ul>
</li>
 	<li>RESOURCES</li>
</ul>
</div>

【讨论】：