是否有 CSS 方法来解决悬停在触摸设备上的问题？答案

【问题标题】：Is there a CSS way to solve hover over touch device?是否有 CSS 方法来解决悬停在触摸设备上的问题？
【发布时间】：2019-08-14 20:39:40
【问题描述】：

在使用 css for touch 设备解决悬停问题方面有什么新进展吗？我知道上一篇文章是在 2016 年左右。我希望使用 css 进行一些新的开发来解决触摸媒体上的悬停问题。请建议使用 css 的任何方法。

我尝试使用 .dropdown:active 但下拉列表时无法点击。


.dropbtn {
  background-color: black;
  color: black;
  border: none;
}


.dropdown-content {
  display: none;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

}

.dropdown:hover .dropdown-content {display: block;}

 <div class="dropdown">
            <p><a>Sample Drop Down</a></p>
               <div class="dropdown-content">
                 <p><a href="click1.html">Click1&#169</a></p>
                 <p><a href="click2.html">Click2&#169</a></p>
                 <p><a href="click3.html">Click3&#169</a></p>
               </div>
             </div>

【问题讨论】：

详细阐述“悬停问题”？
悬停在触摸屏设备上不起作用？假设该网站适用于桌面设备和移动设备。
您在触摸设备上没有鼠标指针，因此悬停在那里并不是一个真正的东西。在某些情况下，您可能会在点击时看到一个悬停激活的元素，但这更像是一种闪烁

标签： javascript html css

【解决方案1】：

Hover 类需要一个指针设备（一个笔设备），因为它是区分动作指向和选择的。在具有触摸界面的移动设备上，您没有前者。

阅读这篇文章： https://www.w3.org/TR/CSS2/selector.html#dynamic-pseudo-classes

【讨论】：

我知道这就是为什么我正在寻求建议如何使用任何需要的 css 方法来解决这个问题（如果有的话）？