Warning: file_get_contents(/data/phpspider/zhask/data//catemap/7/css/39.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Iphone 在Mobile Safari中添加:当用户;水龙头;_Iphone_Css_Ios_Hover_Mobile Safari - Fatal编程技术网

Iphone 在Mobile Safari中添加:当用户;水龙头;

Iphone 在Mobile Safari中添加:当用户;水龙头;,iphone,css,ios,hover,mobile-safari,Iphone,Css,Ios,Hover,Mobile Safari,当移动Safari用户点击div区域时,是否可能触发:hover事件 它不必是链接。实际上,它不能是链接,因为用户将转到另一个网页 我应用的悬停效果实际上是在div:#div:hover{color:#ccc;} 我希望每当iPad或iPhone用户点击div区域时,这种悬停就会发生 我知道链接的背景色有一段CSS: -webkit轻触突出显示颜色:rgba(200,0,0.4) 但这不适用于我的情况 例如,如果这可以应用于文本的颜色,那么我可以使用它 更新:请参阅下面我接受的答案您是在与UIW

当移动Safari用户点击div区域时,是否可能触发
:hover
事件

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

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

我知道链接的背景色有一段CSS:
-webkit轻触突出显示颜色:rgba(200,0,0.4)
但这不适用于我的情况

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


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

您是在与
UIWebview
的上下文中讨论这个问题的吗?您可以插入CSS或Javascript,并将其视为任何其他浏览器。如果你这样做,我建议你


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

我已经找到了如何触发:当用户在不使用javascript的情况下点击div区域时悬停。使用
display:none
显示:块

例如:

<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>
我发现:hover仅在使用
display
时在iOS上触发(与
opacity
相反)。此外,CSS转换会忽略
显示
,因此无法使用CSS转换。如果您希望桌面用户进行转换,可以添加
opacity:0和<代码>不透明度:1

编辑:CSS
可见性
似乎也能工作


谢谢你抽出时间。

我想他说的是移动Safario是的,对不起,我说的只是在移动safari中使用CSS。我意识到这还不清楚。是的,我想知道这是否只可能使用javascript。不幸的是,我对javascript的了解还不够,不能做这种事情。(特别是在使用javascript的同时点击iOS设备)这似乎是一个答案:
.block {
    width:300px;
    height:300px;
    background:black;
}

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

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