使用具有相同 z-index 的 html <a> 标签？

Question

我有滑块，当我将鼠标悬停在滑块播放按钮上时正在显示，但滑块图像在标签内，当播放按钮未隐藏时，我无法单击标签内的图像。我尝试为两者（滑块图像和播放按钮）设置相同的 z-index，但仍然无法正常工作

我需要在播放按钮显示时单击它并转到此播放按钮底部的链接，如果可能的话，请帮忙，对不起我的英语不好。

主要问题：如何单击播放按钮并重定向到放置在标签内的链接？

这是滑块在鼠标悬停时的样子和鼠标离开滑块时的图像

Answer 1

有几种方法可以解决这个问题。一种方法是完全摆脱锚标签，将每个图像分组到一个容器中，并为每个图像分配一个点击事件侦听器以最终打开链接。如果您随后将另一个单击侦听器添加到执行event.preventDefault();单击事件的箭头按钮，则将传递给下面的对象 -<div>包括您的图像。如果你想保留锚标签，事情就有点棘手了。幸运的是，有一些有用的 JavaScript 函数，首先是document.elementsFromPoint(x,y).如果您将当前鼠标坐标提供给该函数 - 例如通过单击箭头按钮 - 它将返回该点下方的对象数组。该数组包含背景中的锚元素，因此只需将其从数组中挑选出来，获取分配给它的链接并使用window.open()命令打开它。这是一个例子：function bid(n) {&nbsp; return document.getElementById(n)}let sliderPlayButtonContainer = bid('slider-play-button-container');let sliderPlayButton = bid('slider-play-button');sliderPlayButtonContainer.addEventListener('click', (event) => {&nbsp; var list = document.elementsFromPoint(event.clientX, event.clientY)&nbsp; var anchorElement = list.find(element => element instanceof HTMLImageElement && element.className == 'slide-img').parentElement;&nbsp; window.open(anchorElement.href, anchorElement.target);});function showSliderPlayButton() {&nbsp; sliderPlayButton.style.transform = "scale(5)";&nbsp; sliderPlayButton.style.opacity = "1";&nbsp; sliderPlayButton.style.transition = "250ms";}sliderPlayButtonContainer.addEventListener('mouseover', () => {&nbsp; showSliderPlayButton();});#slider-play-button-container {&nbsp; position: absolute;&nbsp; z-index: 2;&nbsp; left: 0;&nbsp; right: 0;&nbsp; text-align: center;&nbsp; cursor: pointer;}#slider-play-button {&nbsp; position: relative;&nbsp; top: 25vh;&nbsp; width: 2vw;&nbsp; opacity: 1;}.slide-img {&nbsp; width: 100%;&nbsp; height: 55vh;&nbsp; object-fit: cover;&nbsp; border-radius: .7vw;&nbsp; overflow: hidden;}<span id="slider-play-button-container"><img src="https://i.imgur.com/md7vyI8.png" id="slider-play-button"></span><div id="slider">&nbsp; <a href="https://www.startpage.com" target="_blank">&nbsp; &nbsp; <h3 class="slider-movie-name">ჯონ ვიკი: III თავი - პარაბელუმი</h3>&nbsp; &nbsp; <img src="https://i.imgur.com/OP3AITl.jpg" class="slide-img">&nbsp; </a></div>

Answer 2

parentElement 属性对解决我的问题有很大帮助playButtonATagHref = sliderImage[imgOffset].parentElement.href;sliderPlayButton.addEventListener('click',()=>{&nbsp; &nbsp; window.location.href = playButtonATagHref;});