:移动设备的悬停模拟

Question

我想要"。joffre描述"；出现在：悬停在移动设备上，但很明显：悬停在触摸屏上是不可能的。如果没有JS，只使用CSS，就不会有任何漏洞；。joffre描述"；变成"；不透明度：1〃；当我触摸此初始属性(不透明度：0(时？

@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;
}

Answer 1

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

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

另一个有趣的选择是

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

这里有更多相同的内容-https://medium.com/@mezoistvan/finally-一次性解决方案-悬停在触摸屏上-c498af39c31c