html - 鼠标悬停在 HTML 上时获取前面的图像

Question

我在 div 中有很多图像按钮，我希望当我将鼠标悬停在图像中时，它会更改 scr 并显示相同的图像，但用边框突出显示。 像这里一样显示之前/之后:

它工作正常，但是当我将所有其他图像放在一起时，它显示如下:

我想我需要在鼠标悬停在前面时设置图像；知道吗？

更新: 代码:

 <div id="mymap" width="720" style="width: 920px; height: 1227px; position: relative; left: 250px; transform: scale(.5,.5); -ms-transform: scale(.5,.5); -webkit-transform: scale(.5,.5); -o-transform: scale(.5,.5); -moz-transform: scale(.5,.5);">
        <img id="Burimi" style="position: absolute; left: 10px" src="Images/Reagion/Burimi-B.png" onmouseover="this.src='Images/reagion/Burimi-A.png'" onmouseout="this.src='Images/reagion/Burimi-B.png'" />
        <img id="N Batinah" style="position: absolute; left: 98px; top: 1px;" src="Images/Reagion/N Batinah-B.png" onmouseover="this.src='Images/reagion/N Batinah-A.png'" onmouseout="this.src='Images/reagion/N Batinah-B.png'" /></dive>

Answer 1

使用简单的 CSS，您应该能够更改 z-index 属性。假设元素定位在 absolute 或 relative 中，只需使用

#mymap img:hover { z-index: 9999; }