如何处理触摸设备上的悬停效果 [英] how to deal with hover effect on touch devices

问题描述

我有以下代码

<div>
    <img src="http://placehold.it/350x150"/>
    <div class="link-cont"><a href="#">click here to see more info</a></div>

</div>


div {
    width: 350px;
    font-size:12px;
    position: relative;    
}
div img{
    padding:0 10px;    
}
.link-cont {
    background: red;
    position: absolute;
    bottom: 0;
    width: 370px;
    height: 210px; 
    opacity: 0;
    transition: all 0.4s;
    z-index: -1
}
div:hover  .link-cont {
    opacity: 1; 
    bottom:-40px;
}
.link-cont a{    
    opacity: 0;  
}
div:hover  .link-cont a{
    position: relative; 
    opacity: 1; 
    bottom:-175px;
    left:10px;
    background:#fff;
    color:red;
    text-decoration:none;
    padding:0 10px;
}

链接包裹在悬停时显示的div内。我如何使这个触摸设备友好。

A link is wrapped inside a div which appears on hover. how do i make this touch device friendly.

jsfidd - > http：// Jsfiddle .net / yeyene / Nnd7w / 17 /

jsfidd--> http://jsfiddle.net/yeyene/Nnd7w/17/

推荐答案

多种解决方案：

• 在触摸设备样式表中跳过悬停效果


• 使用JavaScript将鼠标悬停在点击互动中


• 使用JavaScript在触摸设备上模拟悬停互动（请参阅 StackOverflow上的此问题

• skip hover effects in touch device stylesheets
• use JavaScript to turn hover into click interactions
• use JavaScript to simulate hover interactions on the touch device (see this Question on StackOverflow

这篇关于如何处理触摸设备上的悬停效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！