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

Posted 2023-03-06

【中文标题】当用户“点击”时，在 Mobile Safari 中添加 :hover 效果

【英文标题】：Adding a :hover effect in Mobile Safari when the user "taps"

【发布时间】：2011-10-31 11:02:47

【问题描述】：

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

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

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

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

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

更新：请在下面查看我接受的答案

【问题讨论】：

这似乎是一个答案：***.com/questions/2851663/…

【参考方案1】：

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

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

【讨论】：

我认为他在谈论移动 safari

哦，是的，抱歉，我只是在谈论在移动 safari 中使用 CSS。我意识到这不清楚。

是的，我想知道这是否只能使用 javascript。不幸的是，我对 javascript 的了解还不够，无法做这种事情。 （尤其是在 ios 设备上使用 JavaScript）

【参考方案2】：

我已经弄清楚如何在用户点击 div 区域而不使用 javascript 时触发 :hover。这是使用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 似乎也可以工作。

感谢您的时间。