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

我已经想出了如何触发：当用户在不使用javascript的情况下点击div区域时悬停。这是使用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时触发iOS（而不是opacity）。此外，CSS转换会忽略display，因此无法使用CSS进行转换。如果您希望过渡桌面用户，可以添加opacity:0;和opacity:1;

编辑：CSS visibility似乎也有效。

感谢您的时间。

当用户“点击”时在Mobile Safari中添加：悬停效果

2 个答案: