CSS :hover ne fonctionne pas sur iOS, Safari et Chrome

J'ai un arrondi div qui a une forme arrondie de l'image et un titre en bas avec opacity: 0.5; Sur passez l'opacité doit être 1. Fourche fine sur tous les navigateurs de bureau et Firefox pour iOS, mais il ne fonctionne pas sur Safari, ni Chrome pour iOS.

Violon: 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}

OriginalL'auteur Rexhin Hoxha | 2016-02-03

  1. 16

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

    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>
    Lorsque vous appuyez sur et maintenez-la enfoncée. C'est le même que le stationnaire et il fonctionne dans Firefox pour iOS.
    Vous avez raison. Le problème que j'ai lors de la tentative de planer dans Chrome et Safari, c'est que je suis en sélectionnant le texte quand j'appuyez et maintenez sur le div. Je pense que Safari met "sélection de texte "avant" l'application hover'.
    Ouais, mais il fonctionne très bien dans Firefox. Bizarre
    J'ai trouvé une solution de contournement: si vous ajoutez onclick="" à la div, le hover fonctionne. Voir mise à jour de réponse.
    Si vous ajoutez cursor: pointer à votre CSS il a le même effet.

    OriginalL'auteur Wouter van Dijke

  2. 0

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

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

    et fixé à un élément de type block:

    .title_wrap {
  ...
  display:block;
}

    Si vous n'utilisez pas le HTML5, vous devrez changer le <div class="title"> à une ligne elment comme <span class="title"> sorte que le code est valide.

    OriginalL'auteur Andréle