[英]how to deal with hover effect on touch devices
i have following code 我有以下代码
<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;
}
A link is wrapped inside a div which appears on hover. 链接包裹在div内,该div出现在悬停时。 how do i make this touch device friendly. 我如何使此触摸设备友好。
jsfidd--> http://jsfiddle.net/yeyene/Nnd7w/17/ jsfidd-> http://jsfiddle.net/yeyene/Nnd7w/17/
Several solutions: 几种解决方案:
Try this: 尝试这个:
<script>
document.addEventListener("touchstart", function(){}, true);
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.