当用户“点击”时，在 Mobile Safari 中添加 :hover 效果

Question

每当 Mobile Safari 用户单击 div 区域时，是否可以触发 :hover 事件？

它不一定是链接。实际上，它不能是链接，因为用户将转到另一个网页。

我应用的悬停效果实际上是在 div 上：#div:hover {color:#ccc;} 我希望每当 iPad 或 iPhone 用户点击 div 区域时就会发生这种悬停。

我知道 CSS 片段用于链接的背景颜色： -webkit-tap-highlight-color:rgba(200,0,0,0.4); 但这不适用于我的情况。

例如，如果这可以应用于文本的颜色，那么我可以使用它。

更新：请参阅下面我接受的答案

Answer 1

您是在 UIWebview 的上下文中谈论这个吗？您可以注入 CSS 或 Javascript，并将其视为任何其他浏览器。如果您这样做，我建议 jQuery

如果您没有使用 UIWebView 那么我们需要在 UIView 上定义手势识别器并处理手势。即在手势处理程序中创建一个悬停 uiview 并在用户点击消失时将其删除......

Answer 2

我已经弄清楚如何在用户点击 div 区域时触发 :hover 而不使用 javascript。这是使用 display:none; 和 display:block; 完成的。

例如：

<div class="block">
    <p>This content is shown *before* the user hovers over .block or taps .block on an iOS device.</p>
    <div class="mask">
        <p>This content is shown *after* the user hovers over .block or taps .block on an iOS device.</p>
    </div>
</div>

CSS：

.block {
    width:300px;
    height:300px;
    background:black;
}

.mask {
    width:300px;
    height:300px;
    background-color:gray;
    display:none;
}

.block:hover .mask {
    display:block;
}

我发现 :hover 仅在使用 display （而不是 opacity）时在 iOS 上触发。此外，CSS 转换会忽略 display，因此无法使用 CSS 进行转换。如果您希望桌面用户进行转换，可以添加 opacity:0; 和 opacity:1;

编辑：CSS visibility 也似乎去工作。

谢谢你的时间。