如何替换移动设备的悬停

Question

我尝试在移动设备上使用 :active，但它似乎不起作用。我可以使用 css 执行此操作还是需要在 javascript 中创建鼠标悬停侦听器？

#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>

Answer 1

如果我必须继续纯 HTML 和 CSS，我有两个选择。

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

其次是有一个复选框来容纳 click/unclick 事件。我只是为移动视图设置了一个示例，最大宽度的@media查询：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>

如何替换移动设备的悬停

How to replace hover for mobile device

javascript

css

mobile

hover