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

Question

我有滑块，当我将鼠标悬停在滑块播放按钮上时正在显示，但滑块图像在标签内，当播放按钮未隐藏时，我无法单击标签内的图像。我尝试为两者（滑块图像和播放按钮）设置相同的 z-index，但仍然无法正常工作我需要在播放按钮显示时单击它并转到此播放按钮底部的链接，如果可能的话，请帮忙，对不起我的英语不好。主要问题：如何单击播放按钮并重定向到放置在标签内的链接？这是滑块在鼠标悬停时的样子和鼠标离开滑块时的图像

Answer 1

有几种方法可以解决这个问题。

一种方法是完全摆脱锚标签，将每个图像分组到一个容器中，并为每个图像分配一个点击事件侦听器以最终打开链接。如果您随后将另一个单击侦听器添加到执行event.preventDefault();单击事件的箭头按钮，则将传递给下面的对象 -<div>包括您的图像。

如果你想保留锚标签，事情就有点棘手了。幸运的是，有一些有用的 JavaScript 函数，首先是document.elementsFromPoint(x,y).

如果您将当前鼠标坐标提供给该函数 - 例如通过单击箭头按钮 - 它将返回该点下方的对象数组。该数组包含背景中的锚元素，因此只需将其从数组中挑选出来，获取分配给它的链接并使用window.open()命令打开它。

这是一个例子：

function bid(n) {

  return document.getElementById(n)

}

let sliderPlayButtonContainer = bid('slider-play-button-container');

let sliderPlayButton = bid('slider-play-button');

sliderPlayButtonContainer.addEventListener('click', (event) => {

  var list = document.elementsFromPoint(event.clientX, event.clientY)

  var anchorElement = list.find(element => element instanceof HTMLImageElement && element.className == 'slide-img').parentElement;

  window.open(anchorElement.href, anchorElement.target);

});

function showSliderPlayButton() {

  sliderPlayButton.style.transform = "scale(5)";

  sliderPlayButton.style.opacity = "1";

  sliderPlayButton.style.transition = "250ms";

}

sliderPlayButtonContainer.addEventListener('mouseover', () => {

  showSliderPlayButton();

});

#slider-play-button-container {

  position: absolute;

  z-index: 2;

  left: 0;

  right: 0;

  text-align: center;

  cursor: pointer;

}

#slider-play-button {

  position: relative;

  top: 25vh;

  width: 2vw;

  opacity: 1;

}

.slide-img {

  width: 100%;

  height: 55vh;

  object-fit: cover;

  border-radius: .7vw;

  overflow: hidden;

}

<span id="slider-play-button-container"><img src="https://i.imgur.com/md7vyI8.png" id="slider-play-button"></span>

<div id="slider">

  <a href="https://www.startpage.com" target="_blank">

    <h3 class="slider-movie-name">ჯონ ვიკი: III თავი - პარაბელუმი</h3>

    <img src="https://i.imgur.com/OP3AITl.jpg" class="slide-img">

  </a>

</div>

Answer 2

parentElement 属性对解决我的问题有很大帮助

playButtonATagHref = sliderImage[imgOffset].parentElement.href;

sliderPlayButton.addEventListener('click',()=>{

    window.location.href = playButtonATagHref;

});