有幾種方法可以解決這個(gè)問(wèn)題。
一種方法是完全擺脫錨標(biāo)簽，將每個(gè)圖像分組到一個(gè)容器中，并為每個(gè)圖像分配一個(gè)點(diǎn)擊事件偵聽(tīng)器以最終打開(kāi)鏈接。如果您隨后將另一個(gè)單擊偵聽(tīng)器添加到執(zhí)行event.preventDefault();單擊事件的箭頭按鈕，則將傳遞給下面的對(duì)象 -<div>包括您的圖像。
如果你想保留錨標(biāo)簽，事情就有點(diǎn)棘手了。幸運(yùn)的是，有一些有用的 JavaScript 函數(shù)，首先是document.elementsFromPoint(x,y).
如果您將當(dāng)前鼠標(biāo)坐標(biāo)提供給該函數(shù) - 例如通過(guò)單擊箭頭按鈕 - 它將返回該點(diǎn)下方的對(duì)象數(shù)組。該數(shù)組包含背景中的錨元素，因此只需將其從數(shù)組中挑選出來(lái)，獲取分配給它的鏈接并使用window.open()命令打開(kāi)它。
這是一個(gè)例子：
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>
