因此，我已经能够弄清楚如何在将鼠标悬停在图像地图区域上时创建一个简单的叠加层，但我不知道如何使其仅悬停在我悬停的区域元素上。我对 JS 和 HTML 很陌生，所以我不知道要寻找什么。这都是为了我正在做的作业，我们甚至没有学习我知道我需要的 JS，所以这确实是我唯一知道要看的地方。
这是我目前拥有的图像映射的主要 HTML。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Buses Map</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<img class="mapbus" src="Test_assets\Map_Rescaled.png" width="1920px" height="1080px" alt="BusesMap" usemap="#busmap">
<map name="busmap">
<area shape="circle" class="HounBStn" coords="932.5,463,16" href="Hounslow_Bus_Station.html" alt="HounslowBusStn">
<area shape="circle" coords="829,463,14.5" href="TreatyCentre.html" alt="TreatyCtr">
<area shape="rect" class="Overlay-81" coords="20,953,280,964" href="Bus_81.html" alt="">
<area shape="rect" coords="20,967.5,315,979" href="Bus_110.html" alt="">
<area shape="rect" coords="20,982,310,994" href="Bus_111.html" alt="">
<area shape="rect" coords="20,997,275,1008" href="Bus_116.html" alt="">
<area shape="rect" coords="20,1011.5,345,1023" href="Bus_117.html" alt="">
<area shape="rect" coords="20,1026,275,1037" href="Bus_120.html" alt="">
<area shape="rect" coords="20,1041,355,1052" href="Bus_203.html" alt="">
<area shape="rect" coords="20,1055.5,245,1067" href="Bus_222.html" alt="">
<area shape="rect" coords="385,953,645,964" href="Bus_235.html" alt="">
<area shape="rect" coords="385,967.5,640,979" href="Bus_237.html" alt="">
<area shape="rect" coords="385,982,690,994" href="Bus_281.html" alt="">
<area shape="rect" coords="385,997,725,1008" href="Bus_423.html" alt="">
<area shape="rect" coords="385,1011.5,680,1023" href="Bus_635.html" alt="">
<area shape="rect" coords="385,1026,650,1037" href="Bus_681.html" alt="">
<area shape="rect" coords="385,1041,635,1052" href="Bus_E8.html" alt="">
<area shape="rect" coords="385,1055.5,640,1067" href="Bus_H20.html" alt="">
<area shape="rect" coords="750,967.5,1110,979" href="Bus_H22.html" alt="">
<area shape="rect" coords="750,982,1040,994" href="Bus_H28.html" alt="">
<area shape="rect" coords="750,997,1095,1008" href="Bus_H32.html" alt="">
<area shape="rect" coords="750,1011.5,1065,1023" href="Bus_H37.html" alt="">
<area shape="rect" coords="750,1026,980,1037" href="Bus_H98.html" alt="">
<area shape="rect" coords="750,1041,1100,1052" href="Bus_N9.html" alt="">
</map>
<div id="overlay">test</div>
<script src="script.js"></script>
</body>
</html>
然后是图像映射本身的 CSS
#overlay{
position: absolute;
top: 0;
bottom: 0;
background-color: aquamarine;
display: none;
z-index: 100;
}
.mapbus{
display: block;
}
然后是我现在拥有的基本覆盖层的小 Javascript。
document.querySelectorAll('area').forEach(area => {
area.addEventListener('mouseover', () => {
document.getElementById('overlay').style.display = 'block';
});
area.addEventListener('mouseout', () => {
document.getElementById('overlay').style.display = 'none';
});
});
我真正需要的只是知道如何做到这一点，然后我应该能够从中找出其余的内容。
当我将鼠标悬停在图像地图上的每个区域元素上时，我尝试通过 if 语句检查区域标记中的特定类，使 JavaScript 更改覆盖层的大小和位置，我最初在颜色上使用该语句来测试它是否有效。它没有，当鼠标悬停在区域元素上时，附加到它的类仍然显示之前的海蓝宝石颜色。
这个 if 语句被放置在上面的 mouseover 监听器中。
if (document.area.class = 'Overlay-81') {
document.getElementById('overlay').style.background-color == 'black';
}
我还尝试通过CSS与另一个元素，但后来当我从之前的帖子中了解到区域标签是不可见的，所以我看不到它时，我放弃了这个想法。
.x:hover{
opacity: 0.7;
background-color: brown;
}
我还是 JavaScript 新手，因为我故意选择远离它，因为它太痛苦了。
看看这个答案。
您需要在图像图上创建一个画布。然后你必须以编程方式突出显示画布覆盖的部分。