Question

我有一个不寻常的问题。它适用于Android手机，但它不能在iPhone上运行。我在iPhone 4和iPhone 6s上进行了测试。

CSS：

.address {
    position: relative;
    overflow: hidden;

    /* Only the -webkit- prefix is required these days */
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
}
.address h1{
    margin: 0px auto;
    text-align: center;
    padding: 10px 0px;
    font-size: 24px;
    color: #00426e;
}

.address::before {
    content: ' ';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: transparent;
    transition: background .35s ease-out;
}

.address:hover::before {
    background: transparent;
}

.address__media {
    display: block;
    min-width: 100%;
    max-width: 100%;
    height: auto;
}

.address__overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 10px;
    color: #00426e;
    -webkit-transform: translateY(100%);
            transform: translateY(100%);

    transition: -webkit-transform .35s ease-out;
    transition:         transform .35s ease-out;
}

.address:hover .address__overlay {
    -webkit-transform: translateY(0);
            transform: translateY(0);
}

.address__overlay__title {
    -webkit-transform: translateY( -webkit-calc(-100% - 10px) );
            transform: translateY( calc(-100% - 10px) );

    transition: -webkit-transform .35s ease-out;
    transition:         transform .35s ease-out;
}

.address:hover .address__overlay__title {
    -webkit-transform: translateY(0);
            transform: translateY(0);
}

HTML：

<article class="address">
    <img class="address__media" src="https://i.imgsafe.org/f0a95617f8.png">
    <div class="address__overlay">
         <h1 class="address__overlay__title">London</h1>
         <p class="address__overlay__content">
            This is a test address<br />
            Okay, it's an awesome address<br />
            Cool Bro
         </p>
    </div>
</article>

您认为可能是什么问题？！是否需要添加iPhone特定的CSS？

Answer 1

从position: absolute注释掉或删除.address::before，然后就可以了。

https://jsfiddle.net/0fugn1uv/10/

而且，在此之前，你的一些过渡需要-webkit-。没有它它仍然有效。但把它放在那里是安全的。

Answer 2

设备中的悬停选项可以像触摸设备中的onclick一样工作。

在你的情况下，来自position:absolute的{{1}}高于所有其他div，所以基本上当你触及＆＃34;伦敦＆＃34;文字您正在触摸.address::before而不是.address::before，因此未应用悬停样式。

由于未正确指定.address，因此可能会应用默认值，这就是它在其他设备上运行的原因。

要么你可以删除＆＃34;绝对＆＃34;值或指定较小的z-index值。

z-index

使用较小的z-index值更新fiddle。

悬停效果不仅适用于iPhone

2 个答案: