0
237
ViewsLa superposición al pasar el mouse o el enfoque no se muestra correctamente en los dispositivos Apple, pero se muestra correctamente en todos los demás dispositivos
He hecho un sitio web usando tailwindcss. Tengo un evento de entrada y salida del mouse que muestra un div encima del div original. El código se muestra correctamente en todos los demás tipos de dispositivos, pero en los dispositivos Apple hay una especie de margen que no es como se supone que debe mostrarse.
Cómo se supone que funciona en imágenes, la primera imagen es el estado predeterminado y la segunda imagen es el estado de activación/enfoque:
En dispositivos Apple, se parece a la siguiente imagen:
El código HTML de la tarjeta.
const visible_service_card_1 = document.getElementById("visible-service-card-1"); visible_service_card_1.addEventListener("mouseenter",(e) => { e.preventDefault(); const visible_service_content_1 = document.getElementById("visible-service-content-1"); visible_service_content_1.classList.remove("hidden"); }); const service_card_content_1 = document.getElementById("visible-service-content-1"); service_card_content_1.addEventListener("mouseout",(e) => { e.preventDefault(); const visible_service_content_1 = document.getElementById("visible-service-content-1"); visible_service_content_1.classList.add("hidden"); }); <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"/> <div class="flex bg-gray-800 flex-col justify-center items-center py-10 border-2 border-gray-800 rounded-2xl overflow-hidden relative"> <div class="z-10 flex items-center justify-center flex-col " id="visible-service-card-1"> <img src="https://83westmedia.co.za/images/web_dev_icon.svg" alt="Website Development Services" class="h-28 w-auto"> <h3 class="text-gray-50 text-2xl font-sans font-semibold not-italic inline-flex tw-py-4">Web Development</h3> </div> <div class="absolute h-full bg-gray-50 z-20 px-3 flex items-center hidden transition-all delay-100" id="visible-service-content-1"> <p class="font-sans font-semibold text-gray-800 text-base">We are experts with many years of combined experience delivering interoperable, scalable, and flexible web & mobile applications for all kinds of industries. Let us give a long lasting impression to your viewers.</p> </div> </div>
·
Juan Pablo Isaza
Answer question