Html 当使用CSS单击其他卡时，将卡移回

我正在尝试创建一个翻转卡功能，它可以在桌面视图中悬停，而在移动视图中单击。 我既可以使用

复选框

实现，也可以完全使用CSS实现

下面是代码片段：

.flip卡{
宽度：150px；
高度：180像素；
边缘：1米；
透视图：1500px；
}
.翻转卡.翻转卡内部{
位置：相对位置；
宽度：100%；
身高：100%；
变换样式：保留-3d；
变换：变换0.8s三次贝塞尔（0.75,0,0.85,1）；
}
.更多{
显示：无；
}
.更多：选中~.翻转卡内部{
变换：旋转（180度）；
}
.正面翻转卡片，.背面翻转卡片{
位置：绝对位置；
宽度：100%；
身高：100%；
背面可见性：隐藏；
变换样式：保留-3d；
边界半径：6px；
}
.内部{
身高：100%；
显示：网格；
填充：1.5em；
}
.翻转卡正面{
背景色：#2980b9；
}
.把卡片翻回去{
变换：旋转（180度）；
背景色：#fff；
边框：2px实心#f0；
}
@媒体屏幕和屏幕（最小宽度：900px）{
.翻转卡内部：悬停{
变换：旋转（180度）；
}
}

异常值
马尔科姆·格拉德威尔
由添加
Jitesh
擦鞋狗
菲尔·奈特
由添加
iSharet

这里有一个CSS专用的解决方案（我将在下面解释一个问题）：

.flip卡{
宽度：150px；
高度：180像素；
边缘：1米；
透视图：1500px；
显示：内联块；
}
#未打开卡片：未（：选中）~.翻转卡片{
位置：相对位置；
z指数：2；
}
.翻转卡.翻转卡内部{
位置：相对位置；
宽度：100%；
身高：100%；
变换样式：保留-3d；
变换：变换0.8s三次贝塞尔（0.75,0,0.85,1）；
}
输入[name=“卡控制”]{
显示：无；
}
.更多：选中+.翻转卡内部{
变换：旋转（180度）；
}
.翻转卡正面，
.把卡片翻回去{
位置：绝对位置；
宽度：100%；
身高：100%；
背面可见性：隐藏；
变换样式：保留-3d；
边界半径：6px；
}
.内部{
身高：100%；
显示：网格；
填充：1.5em；
}
.翻转卡正面{
背景色：#2980b9；
}
.把卡片翻回去{
变换：旋转（180度）；
背景色：#fff；
边框：2px实心#f0；
}
@媒体屏幕和屏幕（最小宽度：900px）{
.翻转卡内部：悬停{
变换：旋转（180度）；
}
}
#屏风{
显示：固定；
位置：绝对位置；
排名：0；
左：0；
宽度：100vw；
高度：100vh；
z指数：1；
}
#无卡打开：选中~#屏幕{
显示：无；
}

异常值
马尔科姆·格拉德威尔
由添加
Jitesh
擦鞋狗
菲尔·奈特
由添加
iSharet
隐姓埋名
大卫·伊格尔曼
由添加
阿尔瓦罗

我只是仔细检查了一下，我的第二个想法“你能在活动状态下增加一个数据属性，然后基于最高属性数进行样式设置吗？”不起作用，因为你不能基于最高数值进行选择。我回到了我的第一个想法：99.5%确定你不能在纯CSS中实现这一点。如果是这样的话，你能用jqeury提供有效的解决方案吗@macoI只想到了单选按钮，但我不知道如何做“当有人点击它”部分。虽然所有的aria隐藏都很糟糕，但是它的可访问性很差。我认为在这种情况下你不需要隐藏aria。单选按钮已通过CSS隐藏，带有

display:none

，标签可能需要标记，以便它们指定要执行的操作（可能需要“按钮”角色）。。。但总的来说，这将是一场无障碍的噩梦，我并不羡慕你在这一点上：哦。非常感谢阿尔瓦蒙托罗为这一切所做的努力。这太神奇了。我几乎失去了通过css实现的希望。