Question

我尝试创建一个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的情况下绕过这个？

Answer 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，这在大多数情况下似乎已经足够了，但是如果它不合适，则溢出：auto会在div的一侧显示一个sclŕollbar（这是可以接受的）

用于触摸的CSS伪类

1 个答案: