Javascript 滑块上的移动双击问题（应改为一个tocuh）

我创建了一个悬停效果，它在悬停时在滑块中显示一些按钮，并在单击时切换它们的可见性。问题在于，在移动设备上，需要两次令人讨厌的点击才能显示它们。到目前为止，我读到：

并尝试：

@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;
}
}

使用的代码的代码笔：

---

IOS设备会出现此问题，您需要使用L4 Media Query来解决此问题，您提出的问题已在此处得到回答，并已被接受。建议参考它

问题是我申请了，但没有解决。我说我读了另一个话题。而且它也发生在Android上老实说，我不完全确定，因为它不起作用，你能编辑代码笔吗？我提到了我编辑和使用的L4媒体查询，但也有一些javascript可能是问题的一部分

<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>

$('.slick-current').toggleClass('current-hover');