使用Tailwind与OwlCarousel实现Netflix滑块时，卡片hover放大后内部元素无法点击的问题求助

大家好，我正在用Tailwind和OwlCarousel复刻Netflix的滑块效果，目前整体已经差不多成型了，但遇到一个头疼的问题：当我hover卡片时，会给卡片加上放大效果来显示详情，但放大后内部的元素根本点不了！有没有大佬能帮我看看这个问题呀？

HTML结构 #

<section class="mx-auto w-screen relative flex flex-col gap-4 px-5 mb-16">
    <div class="owl-carousel owl-theme">
        <div class="item group transition-all sm:hover:absolute sm:hover:scale-125 border border-red-600">
            <div href="#" class="card bg-neutral-900 rounded-md cursor-pointer overflow-hidden">
                <div>
                    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQKSRTtOrtjLaagEC2gTK6VsPq4NEFk_72hhg&s"
                        alt="">
                </div>
                <div class="hidden group-hover:flex bg-white p-1.5 flex-col h-fit w-full">
                    <div class="flex gap-3 sm:group-hover:scale-[.8] origin-top-left w-[calc(100%/0.8)]">
                        <span>
                            MOVIE TITLE
                        </span>
                    </div>
                    <a href="" class="text-red-600 sm:group-hover:scale-[.8] origin-top-left w-[calc(100%/0.8)]">
                        try to click me you can't
                    </a>
                </div>
            </div>
        </div>
        <div class="item group transition-all sm:hover:absolute sm:hover:scale-125 border border-red-600 overflow-hidden">
            <div href="#" class="card bg-neutral-900 rounded-md cursor-pointer overflow-hidden">
                <div>
                    <img src="https://occ-0-6613-7435.1.nflxso.net/dnm/api/v6/Qs00mKCpRvrkl3HZAN5KwEL1kpE/AAAABQquP3MObc4Xmx8fS1E0EtFypAJFcNs8U73s6OHL2GjPOuIRbKkknfytMjCRkky6eDIe_8LHwBndef1-gQiN3IMX5NEqFRShrIi9MKSOMGvoTalZ2GRya1eswfUOXrTJ6Nnflg.webp?r=bb3"
                        alt="">
                </div>
                <div class="hidden group-hover:flex bg-white p-1.5 flex-col h-fit w-full">
                    <div class="flex gap-3 sm:group-hover:scale-[.8] origin-top-left w-[calc(100%/0.8)]">
                        <span>
                            MOVIE TITLE
                        </span>
                    </div>
                    <a href="" class="text-red-600 sm:group-hover:scale-[.8] origin-top-left w-[calc(100%/0.8)]">
                        try to click me you can't
                    </a>
                </div>
            </div>
        </div>
        <div class="item group transition-all sm:hover:absolute sm:hover:scale-125 border border-red-600">
            <div href="#" class="card bg-neutral-900 rounded-md cursor-pointer overflow-hidden">
                <div>
                    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQKSRTtOrtjLaagEC2gTK6VsPq4NEFk_72hhg&s"
                        alt="">
                </div>
                <div class="hidden group-hover:flex bg-white p-1.5 flex-col h-fit w-full">
                    <div class="flex gap-3 sm:group-hover:scale-[.8] origin-top-left w-[calc(100%/0.8)]">
                        <span>
                            MOVIE TITLE
                        </span>
                    </div>
                    <a href="" class="text-red-600 sm:group-hover:scale-[.8] origin-top-left w-[calc(100%/0.8)]">
                        try to click me you can't
                    </a>
                </div>
            </div>
        </div>
        <div class="item group transition-all sm:hover:absolute sm:hover:scale-125 border border-red-600">
            <div href="#" class="card bg-neutral-900 rounded-md cursor-pointer overflow-hidden">
                <div>
                    <img src="https://placecats.com/340/192" alt="">
                </div>
                <div class="hidden group-hover:flex bg-white p-1.5 flex-col h-fit w-full">
                    <div class="flex gap-3 sm:group-hover:scale-[.8] origin-top-left w-[calc(100%/0.8)]">
                        <span>
                            MOVIE TITLE
                        </span>
                    </div>
                    <a href="" class="text-red-600 sm:group-hover:scale-[.8] origin-top-left w-[calc(100%/0.8)]">
                        try to click me you can't
                    </a>
                </div>
            </div>
        </div>
        <div class="item group transition-all sm:hover:absolute sm:hover:scale-125 border border-red-600">
            <div href="#" class="card bg-neutral-900 rounded-md cursor-pointer overflow-hidden">
                <div>
                    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQKSRTtOrtjLaagEC2gTK6VsPq4NEFk_72hhg&s"
                        alt="">
                </div>
                <div class="hidden group-hover:flex bg-white p-1.5 flex-col h-fit w-full">
                    <div class="flex gap-3 sm:group-hover:scale-[.8] origin-top-left w-[calc(100%/0.8)]">
                        <span>
                            MOVIE TITLE
                        </span>
                    </div>
                    <a href="" class="text-red-600 sm:group-hover:scale-[.8] origin-top-left w-[calc(100%/0.8)]">
                        try to click me you can't
                    </a>
                </div>
            </div>
        </div>
        <div class="item group transition-all sm:hover:absolute sm:hover:scale-125 border border-red-600">
            <div href="#" class="card bg-neutral-900 rounded-md cursor-pointer overflow-hidden">
                <div>
                    <img src="https://occ-0-6613-7435.1.nflxso.net/dnm/api/v6/Qs00mKCpRvrkl3HZAN5KwEL1kpE/AAAABQquP3MObc4Xmx8fS1E0EtFypAJFcNs8U73s6OHL2GjPOuIRbKkknfytMjCRkky6eDIe_8LHwBndef1-gQiN3IMX5NEqFRShrIi9MKSOMGvoTalZ2GRya1eswfUOXrTJ6Nnflg.webp?r=bb3"
                        alt="">
                </div>
                <div class="hidden group-hover:flex bg-white p-1.5 flex-col h-fit w-full">
                    <div class="flex gap-3 sm:group-hover:scale-[.8] origin-top-left w-[calc(100%/0.8)]">
                        <span>
                            MOVIE TITLE
                        </span>
                    </div>
                    <a href="" class="text-red-600 sm:group-hover:scale-[.8] origin-top-left w-[calc(100%/0.8)]">
                        try to click me you can't
                    </a>
                </div>
            </div>
        </div>
        <div class="item group transition-all sm:hover:absolute sm:hover:scale-125 border border-red-600">
            <div href="#" class="card bg-neutral-900 rounded-md cursor-pointer overflow-hidden">
                <div>
                    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQKSRTtOrtjLaagEC2gTK6VsPq4NEFk_72hhg&s"
                        alt="">
                </div>
                <div class="hidden group-hover:flex bg-white p-1.5 flex-col h-fit w-full">
                    <div class="flex gap-3 sm:group-hover:scale-[.8] origin-top-left w-[calc(100%/0.8)]">
                        <span>
                            MOVIE TITLE
                        </span>
                    </div>
                    <a href="" class="text-red-600 sm:group-hover:scale-[.8] origin-top-left w-[calc(100%/0.8)]">
                        try to click me you can't
                    </a>
                </div>
            </div>
        </div>
    </div>
</section>

JavaScript代码 #

const addHoverClasses = (event) => {
  const owlitemHovered = event.currentTarget
  owlitemHovered.classList.add("!z-10")
  owlitemHovered.classList.remove("!z-0")
}

const removeHoverClasses = (event) => {
  const owlitemHovered = event.currentTarget
  owlitemHovered.classList.remove("!z-10")
  owlitemHovered.classList.add("!z-0")
}

const getOwlcarouselResponsiveMaxItems = (event) => {
  const owlInstance = event.relatedTarget
  const currentBreakpoint = owlInstance._breakpoint
  const breakpoints = owlInstance.options.responsive

  return breakpoints[currentBreakpoint].items
}

const applyTransformOrigin = (event) => {
  const owlCarousel = event.target
  const owlItems = owlCarousel.querySelectorAll(".owl-item")
  let owlItemActiveCounter = 1
  owlItems.fo

备注：内容来源于stack exchange，提问作者akio