如果将：active selector与：hover结合使用，则可以根据以下步骤实现此目的：只要在：hover selector之后调用：active selector。

.info-slide:hover, .info-slide:active{
   height:300px;
 }

您必须在移动环境中测试小提琴。我现在不能。
更正-我刚在手机上测试过，效果很好

你可以加上 onclick="" 到悬停元素。在那之后，悬停将起作用。
编辑：但是你真的不应该添加任何与你的标记相关的样式，只是把它作为一种替代方式发布。

我在使用微软edge浏览器的移动设备上也遇到了同样的问题。我可以通过以下方法解决问题： aria-haspopup="true" . 它需要添加到div和 :hover , :active , :focus 对于其他移动浏览器。
html示例：

<div class="left_bar" aria-haspopup="true">

css:

.left_bar:hover, .left_bar:focus, .left_bar:active{
    left: 0%;
    }

document.addEventListener("touchstart", function() {}, true);

此代码段将为触摸屏启用悬停效果

在大多数设备上，其他答案都有效。对我来说，为了确保它在每个设备上都能正常工作（在react中），我必须用锚定标签将其 Package 起来 <a> 并添加以下内容： :hover , :focus , :active （按该顺序）以及 role="button" 及 tabIndex="0" .

我是一个cssnoob，但我注意到hover将适用于触摸屏，只要它是一个“可悬停”元素：图像、链接、按钮。您可以使用以下技巧使用css来完成这一切。
将div背景更改为div内的实际图像标记，或在整个div周围创建一个虚拟链接，当您触摸图像时，它将注册为悬停。
这样做意味着您需要页面的其余部分也可以“悬停”，以便当您触摸图像外部时，它可以识别信息幻灯片：悬停已结束。我的诀窍是让所有其他内容都成为虚拟链接。
它不是很优雅，但很管用。

我认为这个简单的方法可以达到这个目的。使用css，您可以关闭指向“none”的指针事件，然后使用jquery切换类。

.item{
   pointer-events:none;
 }

.item.clicked{
   pointer-events:inherit;
 }

.item:hover,.item:active{
  /* Your Style On Hover Converted to Tap*/
  background:#000;
}

使用jquery切换类别：

jQuery('.item').click(function(e){
  e.preventDefault();
  $(this).addClass('clicked')l
});

一个css唯一的解决方案，为那些谁是有麻烦的移动触摸屏按钮造型。
这将修复您的悬停杆/活动按钮问题。

body, html {
  width: 600px;
}
p {
  font-size: 20px;
}

button {
  border: none;
  width: 200px;
  height: 60px;
  border-radius: 30px;
  background: #00aeff;
  font-size: 20px;
}

button:active {
  background: black;
  color: white;
}

.delayed {
  transition: all 0.2s;
  transition-delay: 300ms;
}

.delayed:active {
  transition: none;
}

<h1>Sticky styles for better touch screen buttons!</h1>

<button>Normal button</button>

<button class="delayed"><a href="https://www.google.com"/>Delayed style</a></button>

<p>The CSS :active psuedo style is displayed between the time when a user touches down (when finger contacts screen) on a element to the time when the touch up (when finger leaves the screen) occures.   With a typical touch-screen tap interaction, the time of which the :active psuedo style is displayed can be very small resulting in the :active state not showing or being missed by the user entirely.  This can cause issues with users not undertanding if their button presses have actually reigstered or not.</p>

<p>Having the the :active styling stick around for a few hundred more milliseconds after touch up would would improve user understanding when they have interacted with a button.</p>

我同意上面的答案，但仍然有另一种方法可以做到这一点，那就是使用 media 查询。
假设这是您想要做的：

body.nontouch nav a:hover {
    background: yellow;
}

然后，您可以通过媒体查询执行此操作，如下所示：

@media(hover: hover) and (pointer: fine) {
    nav a:hover {
        background: yellow;
    }
}

有关更多详细信息，请访问此页面。