IOS safari 和 chrome css3 bootstrap 悬停图像

Question

我使用此 CSS 代码在引导程序中为图像创建悬停，但此悬停不适用于 IOS Safari 和 chrome 浏览器。它在安卓上工作。我想知道我哪里错了，我该怎么办？

    .hovereffect {
       width:100%;
       height:100%;
       float:left;
       overflow:hidden;
       position:relative;
       text-align:center;
       cursor:default;
    }

    .hovereffect .overlay {
       width:100%;
       height:100%;
       position:absolute;
       overflow:hidden;
       top:0;
       left:0;
       opacity:0;    
       background-color:rgba(130,139,164,0.5);
       -webkit-transition:all .4s ease-in-out;
       -moz-transition: all .4s ease-in-out;
       -o-transition:all .4s ease-in-out;
       transition:all .4s ease-in-out;
    }

    .hovereffect img {
       display:block;
       position:relative;
       -webkit-transition:all .4s linear;
       transition:all .4s linear;
       -moz-transition:all .4s linear;
       -o-transition:all .4s linear;
    }

    .hovereffect h2 {
       color:#fff;
       text-align:center;
       position:relative;
       font-size:17px;
       background:rgba(41,35,92,0.8);
       -webkit-transform:translateY(-100px);
       -ms-transform:translateY(-100px);
       -moz-transform: translateY(-100px);
       -o-transform: translateY(-100px);
       transform:translateY(-100px);
       -webkit-transition:all .2s ease-in-out;
       -moz-transition: all .2s ease-in-out;
       -o-transition:all .2s ease-in-out;
       transition:all .2s ease-in-out;
       padding:10px;
    }
    .hovertext {
       color:#fff;
       text-align:center;
       position:relative;
       font-size:17px;
       padding:10px;
    }

    .hovereffect a.info {
       text-decoration:none;
       display:inline-block;
       color:#fff;
       border:1px solid #fff;
       background-color:transparent;
       opacity:0;
       filter:alpha(opacity=0);
       -webkit-transition:all .2s ease-in-out;
       -moz-transition:all .2s ease-in-out;
       -o-transition:all .2s ease-in-out;
       transition:all .2s ease-in-out;
       padding:7px 14px;
    }

    .hovereffect a.info:hover {
       box-shadow:0 0 5px #fff;
    }

    .hovereffect:hover img {
       -ms-transform:scale(1.2);
       -webkit-transform:scale(1.2);
       -moz-transform: scale(1.2);
       -o-transform: scale(1.2);
       transform:scale(1.2);
       border-radius: 15px;
    }

    .hovereffect:hover .overlay {
       opacity:1;
       filter:alpha(opacity=100);
       cursor: pointer;
       visibility: visible;
    }

    .hovereffect:hover h2,.hovereffect:hover a.info {
       opacity:1;
       filter:alpha(opacity=100);
       -ms-transform:translateY(0);
       -webkit-transform:translateY(0);
       -moz-transform: scale(1.2);
       -o-transform: scale(1.2);
       transform:translateY(0);
    }

    .hovereffect:hover a.info {
       -webkit-transition-delay:.2s;
       -moz-transition-delay: .2s;
       -o-transition-delay: .2s;
       transition-delay:.2s;
     }

    #rounded {
       -webkit-border-radius: 25px;
       -moz-border-radius: 25px;
        border-radius: 25px;
     }
    .rounded {
       -webkit-border-radius: 25px;
       -moz-border-radius: 25px;
       border-radius: 25px;
    }

Answer 1

您需要为 iOS 使用 :focus 选择器。只需像添加 :hover 选择器一样将其添加到您的类中。