修改移动端悬停效果后的 CSS

Question

我正在一个网站上工作，其中一个会话具有点击效果。基本上文本主体是隐藏的，当点击它时会展开显示隐藏的文本，如图所示：

Before Click

After Click

在 CSS 中，基本上文本元素的高度为 30 像素及之后：悬停它有 300 像素。

.portfolio_text{
        height:30px;
}
#ho_nf:hover .portfolio_text {
        height: 200px;
        padding: 20px 14px;
        overflow: visible;
       
    }

如果我在元素的 Div 外部单击或单击 6 列表中的另一个元素，Portfolio_text 将返回正常高度。

我需要的是能够通过单击我在左角添加的关闭图标将文本恢复为 30 的大小以再次查看背景图像。

我尝试使用 JQuery，但它不起作用，我只需要在移动设备上使用它，因为桌面基于：悬停并移除鼠标它会恢复正常状态。

Answer 1

由于没有光标，因此没有:hover 用于移动设备的伪元素。

尝试使用:active。