2

I have created a hover effect that shows some buttons in a slider on hover and which also toggles the visibility of them on click. The problem is that on mobile devices an annoying two click is required to display them. So far I have read: https://css-tricks.com/annoying-mobile-double-tap-link-issue/ https://css-tricks.com/solving-sticky-hover-states-with-media-hover-hover/ How to fix a double tap :hover issue on on mobile (ios)?

And tried:

@media (hover: hover) and (pointer: fine){
.boton-detalles-portafolio:hover {
  color:#827D74;
  border-color:white;
}

.boton-visitar-portafolio:hover {
  color:white;
}


.slick-current.current-hover:hover .contenido-text-links {
  visibility: visible;
  transition: all ease 0.8s;
  opacity:1;
}
}

Codepen of the code used: https://codepen.io/Snippet/pen/NWqeaNR

<div class="slide">      
  <div class="contenido-slide">
  <img class="imagen-principal-portafolio" src="https://tomastestart.cl/wp-content/themes/tomastestart/img/otzerling-portafolio.png"/>
    <div class="contenido-text-links d-flex flex-column">
      <h4 class="subtitulo-portafolio text-center justify-content-center mx-auto">Comunidad Otzerling.</h4>
      <div class="botones-portafolio d-flex justify-content-center">
        <a class="btn mr-2 boton-detalles-portafolio" href="detalle-portafolio">Detalles</a>
        <a class="btn ml-2 boton-visitar-portafolio" target="_blank" rel="nofollow" href="https://www.otzerling.com">Visitar</a>
      </div>          
      <p class="justify-content-center text-center etiqueta-portafolio"><img class="imagen-etiqueta-portafolio" src="<?php bloginfo('template_url'); ?>/img/portafolio-tag.svg"/>Sitio Web</p>           
    </div>
  </div>      
</div>

UPDATE: Removing this line in javascript works fine, that was the cause of the problem, though it now doesn't work the toggle on click.

$('.slick-current').toggleClass('current-hover');
Community
  • 1
  • 1
Snippet
  • 43
  • 8

1 Answers1

1

This problem occurs with IOS devices, you need to use L4 Media Query to solve this , the question you asked is already answered in here and it's accepted. Recommend to refer it How to fix a double-tap:hover issue on on mobile (ios)?

Avishka Dambawinna
  • 1,180
  • 1
  • 13
  • 29
  • Problem is I applied that and is not solved. I stated I read this other topic. Also it happens as well on Android – Snippet Apr 13 '20 at 04:02
  • Honestly I'm not completely sure since it didn't work, can you edit the codepen? I mentioned what I edited and used the L4 media query, but there's also some javascript that could be part of the issue – Snippet Apr 13 '20 at 04:13