用于触摸的 CSS 伪类

Posted 2023-03-06

【中文标题】用于触摸的 CSS 伪类

【英文标题】：CSS pseudo class for touch

【发布时间】：2015-08-15 23:43:41

【问题描述】：

我尝试创建一个redmine 纯 CSS 主题，它隐藏了属性部分，只在鼠标点击或触摸时显示。

我添加了Pseudo Class:active，它在台式机上运行良好，但在 android Chrome 上，它只激活了几分之一秒，然后它又失去了这个属性（因为它开始选择复制和粘贴然后而是）

.details > .attributes 
        height:20px;
        overflow:hidden;
        display: block;
        cursor:pointer;

.details > .attributes:hover 
        background-color:#ddd;

.details > .attributes:active, .details > .attributes:focus 
        height:auto;

（这里我也添加了:focus 属性，但这并没有改变任何东西）

如何在不编辑 html 代码且不使用 javascript 的情况下绕过此问题？

【问题讨论】：

在移动设备上可以使用 html 中的任何内容吗？就像在触摸设备上查看时 body 上的 .mobile 类？

我认为 redmine 没有这个。问题是，.attributes 只是一个具有该类的 div，而 div 不能有焦点

您可以在触摸设备上禁用焦点/悬停等，这将解决您的问题并提高这些设备上的性能，但您需要在 css 中添加一些东西来区别于桌面。 here is a js method, although I know you want a pure css solution不知道如果你不能区分你会怎么做

您可以使用modernizr来检测设备是否有触摸事件，如果有，您可以附加标记。

我想把它全部保存在一个 redmine css 主题文件中

【参考方案1】：

作为解决方法，我现在添加了一个过渡并在:hover 上保持打开状态：

.details > .attributes 
        height:20px;
        overflow:hidden;
        display: block;
        cursor:pointer;

.details > .attributes:hover 
        background-color:#ddd;

.details > .attributes:active, .details > .attributes:hover 
        height:120px;
        overflow:auto;
        transition: height 1.1s ease-in;

这只是一种解决方法，因为这不适用于height:auto，因为无法从height:20px 转换到height:auto。我定义的 120px 在大多数情况下似乎已经足够了，但如果它不适合，overflow: auto 会在 div 的一侧显示一个 sclŕollbar（这是可以接受的）