html - CSS:悬停、聚焦或事件在移动设备上不起作用

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>

Answer 1

如果没有标签索引，则无法聚焦 div 元素。如果将其中一个 div 的选项卡索引设置为数字，看看会发生什么。

当然，如果界面是触摸界面，悬停是没有意义的。手指不能悬停在大多数触摸屏上，所以我相信大多数移动浏览器要么觉得有趣，要么忽略它。