我正在为自己做一个项目。我用悬停过渡制作了一些img。
它适用于所有浏览器。但不是在ipad上。为什么?由于某些原因,由于文字原因,我无法单击图像。我不知道为什么。我有两个例子:
范例1:
http://jewelbeast.com/imghover/如果在ipad上测试此1,然后单击img。您会看到什么都没发生。因为居中的文本与垂直对齐和text-align:。
例子2
http://jewelbeast.com/imghover/test.html如果在ipad上测试此1,则可以单击图像的右侧。因为在右侧没有文本。
的CSS
div.hover-img-vertical-smallborder{
margin-top: 25px;
height: 400px;
width: 228px;
float: left;
display: block;
margin-left: 10px;
}
div.hover-img-vertical-smallborder section{
position: relative;
width: 217px;
height: 350px;
border: 5px solid white;
outline: 1px solid #c8c8c8;
float:left;
text-align: center;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-ms-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
overflow: hidden;
background: #dfdfdf;
}
div.hover-img-vertical-smallborder section:hover{
height: 380px;
margin-top: -15px;
}
div.hover-img-vertical-smallborder section img{
position: absolute;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-ms-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
}
div.hover-img-vertical-smallborder section .text{
position: absolute;
top: 0;
left: 0;
display: table;
height: 100%;
}
div.hover-img-vertical-smallborder section span{
width: 200px;
display: table-cell;
vertical-align: middle;
padding: 20px;
text-align: center;
color: black;
opacity: 0;
text-shadow: 1px 1px 0px rgba(255,255,255,0.3);
-webkit-transition: all .3s;
-moz-transition: all .3s;
-ms-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
}
div.hover-img-vertical-smallborder section:hover span{
opacity: 1;
}
div.hover-img-vertical-smallborder section:hover img{
opacity: 0.5;
}
div.hover-img-vertical-smallborder section span h1{
width: 100%;
text-align: center;
font-size: 18px;
font-family: Verdana, sans-serif;
font-weight: bold;
line-height: 25px;
margin-bottom: 3px;
}
div.hover-img-vertical-smallborder section span p{
width: 100%;
text-align: center;
font-size: 10px;
font-family: Verdana, sans-serif;
font-weight: bold;
margin-bottom: 10px;
}
div.hover-img-vertical-smallborder section span a.button{
display: table;
margin: 0px auto;
text-align: center;
color: white;
text-shadow: none !important;
text-decoration: none;
font-size: 10px;
font-family: Verdana, sans-serif;
font-weight: bold;
padding: 9px 10px 11px 10px;
border: 1px solid #616161;
outline: 1px solid #000000;
background: #494949; /* Old browsers */
background: -moz-linear-gradient(top, #494949 1%, #3a3a3a 94%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#494949), color-stop(94%,#3a3a3a)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #494949 1%,#3a3a3a 94%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #494949 1%,#3a3a3a 94%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #494949 1%,#3a3a3a 94%); /* IE10+ */
background: linear-gradient(to bottom, #494949 1%,#3a3a3a 94%); /* W3C */
}
div.hover-img-vertical-smallborder section span a.entire{
width: 100%;
position: absolute;
top: 0px;
left: 0px;
height: 100%;
}
的HTML
<div class="hover-img-vertical-smallborder">
<section class="bg-black"> <!-- bg-black is a black background on hover normal is grey -->
<img src="img/img_5.jpg" style="left: -50%;"/>
<div class="text">
<span>
<h1>This is a title</h1>
</span>
</div>
</section>
</div>
我希望有人能弄清楚。
谢谢。
最佳答案
触摸设备上没有触发悬停事件。您需要在JS中使用以下任一事件:
touchstart
touchmove
touchend
touchcancel
关于html - 在iPad上使用文本进行CSS转换,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/16871169/