Question

0

249

Vistas

Overlay on hover / focus not showing properly on apple devices but displays properly on all other devices

I have made a website using tailwindcss. I have a mouse enter and leave event that shows a div on top of the original div. The code displays properly on all other devices types, but on Apple devices there is a margin of sorts which is not how it's supposed to show.

How it supposed to work in images, the first image is the default state and the second image is the on hover/focus state:

Defualt state

The correct hover state shown on all other devices

On apple devices, it looks like the following image:

The hover state on apple devices with a margin of some sort

The HTML Code for the card

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>

about 4 years ago · Juan Pablo Isaza

Responde la pregunta

0

249

Overlay on hover / focus not showing properly on apple devices but displays properly on all other devices

Encuentra empleos remotos

Andres GPT