：移动设备的悬停模仿[重复]答案

【问题标题】：:hover imitation for mobile devices [duplicate]：移动设备的悬停模仿[重复]
【发布时间】：2021-06-24 12:17:40
【问题描述】：

我希望“.joffre-description”出现在移动设备的 :hover 上，但显然 :hover 在触摸屏上是不可能的。如果没有 JS，仅使用 CSS，当我触摸此初始属性（不透明度：0）时，是否有任何技巧可以将“.joffre-description”变成“不透明度：1”？

@media (max-width: 858px) {
   .joffre-description {
        top: 13rem;
        position: absolute;
        opacity: 0;
        padding: 3rem;
        height: 30rem;
        background: rgba(247, 192, 138, .8);
    }

    .joffre-description:hover {
        opacity: 1;
        transition: 0.5s;
    }

【问题讨论】：

标签： css

【解决方案1】：

您可以在 :hover 伪类之后使用 :active 选择器来在移动设备中实现所需的效果。

.joffre-description:hover, .joffre-description:active {
    opacity: 1;
    transition: 0.5s;
}

另一个有趣的探索选项是

 @media(hover: hover) and (pointer: fine) {
    //Code goes here.
 }

【讨论】：