web-dev-qa-db-fra.com

CSS: le survol ne fonctionne pas sur iOS Safari et Chrome

J'ai un div arrondi qui a une image arrondie et un titre en bas avec opacity: 0.5; en vol stationnaire l'opacité devrait devenir 1. Il convient parfaitement sur tous les navigateurs de bureau et Firefox pour iOS mais cela ne fonctionne pas sur Safari ni Chrome pour iOS.

Fiddle: https://jsfiddle.net/a10rLbnL/2/

HTML:

<div class="video_wrap update">
  <div class="content">
    <div class="img_wrap"><img src="https://i.ytimg.com/vi/0HDdjwpPM3Y/hqdefault.jpg"></div>
    <div class="title_wrap"><div class="title">bang bang</div></div>
  </div>
</div>

CSS:

.video_wrap {
    display: inline-block;
    width: 30%;
    padding-bottom: 30%;
    margin: 0 1%;
    position: relative;
    vertical-align: top;
}

.content {
    position: absolute;
    height: 100%;
    width: 100%;
}

.img_wrap {
    height: 100%;
    border-radius: 120px;
    overflow: hidden;
}

.title_wrap {
    line-height: 50px;
    top: -50px;
    height: 50px;
    position: relative;
    left: 0px;
    background: #fff;
    color: #f8008c;
    font-size: 12px;
    text-align: center;
    cursor: default;
    opacity: 0.5;
    transition: all .5s ease-in;
    min-height: 50px;
}

.img_wrap img {
    height: 100%;
    cursor: pointer;
}

.title_wrap:hover {opacity: 1}
htmlioscsscss3hover
7
Rexhin Hoxha

J'ai trouvé une solution de contournement: si vous ajoutez onclick="" à la div, le survol fonctionnera. 

Votre html serait:

<link rel="stylesheet" href="hover.css" type="text/css"/>

<div class="video_wrap update">
  <div class="content">
    <div class="img_wrap"><img src="https://i.ytimg.com/vi/0HDdjwpPM3Y/hqdefault.jpg"></div>
    <div class="title_wrap" onclick=""><div class="title">bang bang</div></div>
  </div>
</div>
14
Wouter van Dijke

Le navigateur iOS a besoin d'un élément qui est cliquable par défaut. Si vous utilisez HTML5, vous pouvez modifier le wrapper div en a-tag:

<a href="javascript:void(0);" class="title_wrap"><div class="title">bang bang</div></a>

et le définir sur un élément de bloc:

.title_wrap {
  ...
  display:block;
}

Si vous n'utilisez pas HTML5, vous devez remplacer le <div class="title"> par un élément intégré tel que <span class="title"> pour que le code soit valide.

0
Andréle