我有以下代码
<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 内。我如何使这个触摸设备变得友好。
jsfiddle-->http://jsfiddle.net/yeyene/Nnd7w/17/ http://jsfiddle.net/yeyene/Nnd7w/17/
几种解决方案:
- 跳过触摸设备样式表中的悬停效果
- 使用 JavaScript 将悬停转换为点击交互
- 使用 JavaScript 模拟触摸设备上的悬停交互(请参阅StackOverflow 上的这个问题 https://stackoverflow.com/questions/2851663/how-do-i-simulate-a-hover-with-a-touch-in-touch-enabled-browsers
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)