Я создал эффект наведения, который показывает некоторые кнопки в ползунке при наведении, а также переключает их видимость при нажатии. Проблема в том, что на мобильных устройствах для их отображения требуется два щелчка мышью. Пока я прочитал: https://css-tricks.com/annoying-mobile-double-tap-link-issue/ https://css-tricks.com/solving-sticky-hover-states-with-media-hover-hover/ Как исправить двойное касание: проблема с зависанием на мобильном телефоне (ios)?
И пробовал:
@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 используемого кода: 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: удаление этой строки в javascript работает хорошо, это было причиной проблемы, хотя теперь она не работает переключение при нажатии.
$('.slick-current').toggleClass('current-hover');