在移动设备上，CSS中的:hover、:focus或:active无法正常工作

Question

我有一个简单的卡片，当我将鼠标悬停在上面时，它会放大。但在移动设备上，悬停、聚焦或激活功能无效。

在移动设备上，我希望当有人点击这张卡片时，它能够实现悬停、聚焦或激活的效果。

是否有任何选项可以实现这一点？

.card {
    transition: transform .2s;
    background-repeat: no-repeat;
    max-width: 25%;
    min-width: 25%;
    height: 200px;
    margin: 50px;
    background: lightblue;
}

.hover-content {
    display: none;
    width: 80%;
    height: 50%;
    margin: 0 auto;
}

.content {
  background: red;
}

.card:hover, .card:focus, .card:active {
    position: relative;
    z-index: 2;
    opacity: 1;
    transform: scale(1.2);
}

.card:hover .hover-content, .card:focus .hover-content, .card:active .hover-content {
    margin-top: 20px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

<div class="card">
    <div class="content">
        <p>iasJ ASJKAS AISJ</p>
    </div>
    <div class="hover-content">
        <p>aksainsi qjsn asj iqjsi asijqs </p>
    </div>
</div>

- Caciky

Answer 1

如果没有设置tab index属性，div元素无法获得焦点。尝试将其中一个div的tab index设为数字，看看会发生什么。

当然，在触摸界面上，悬停是毫无意义的。手指无法悬停在大多数触摸屏幕上，因此我认为大多数移动浏览器要么对其进行奇怪的处理，要么忽略它。

- TheYellowSquares

---

有没有选项可以这样做？ - Caciky

你可以通过 <div tabindex="-1"></div> 来设置 div 标签的 tab 索引。 - TheYellowSquares

Answer 2

如果你正在寻找纯CSS的解决方案，可能会很难找到。历史上，CSS并不擅长处理触摸屏或移动设备的hover状态。在设备之间存在许多不一致之处，如何处理这些状态。

如果您不想使用JavaScript，则建议在移动布局上使页面布局更简单。使用媒体查询以更直接的方式显示信息。

如果您想使用JavaScript，则可以使用touchstart和touchend事件。在这种情况下，您可以将这些事件附加到要使用的HTML元素上，并使用JS触发CSS状态。这肯定是实现您所需的较慢的方法，但如果您绝对需要移动视图具有hover状态，那么这是一种方法。

希望能帮到您。

- ChaseAllbee

Answer 3

对于 focus 或 active 事件，您可以使用 JQuery 暂时更改样式，如下所示：

$('#your-element').addClass("your-class"); 
setTimeout(function(){ $('#your-element').removeClass("your-class"); }, 300);

- JTCon

Answer 4

在移动设备上，悬停效果不起作用，需要使用onclick事件。

如果你只想使用CSS解决问题，可能需要寻找一些触摸事件的CSS。

否则，编写自定义的JS函数是解决问题的方法。

- Partha Mukherjee