Html 悬停堆叠透明图像

我有一些图片。每个图像都有一些透明像素。仅使用CSS，我们可以在不是较高的图像上使用hover属性吗？当较高图像上的像素是透明的时，必须接收“悬停”事件的图像应该是该像素不透明的下一个图像

示例：

HTML:

<div id="container">
    <img src="Map%20base.png">
    <img src="Cavernes.png">
    <img src="Chemins.png">
    <img src="Points%20d'intérêt.png">
    <img src="Villes.png">
</div>

如果仅仅使用CSS是不可能的，那么有没有一种方法可以用JS来实现呢？有些文章谈到使用SVG，但我不想将我的图像转换为SVG

谢谢

As，使用纯CSS是不可能的。所以我找到了一个使用JS的解决方案。诀窍是使用画布绘制图像，并使用“onmousemove”事件查找悬停的像素。如果较高层的像素是透明的，则事件将传输到下一层。依此类推到最后一个

以下是一些工作代码：

HTML:

JS:

---

希望这对其他人有帮助！：）

CSS无法告诉您光标下是否有“不透明”像素。这是一个简单的命中测试，所有像素构成图像的边界。SVG将允许您针对单个元素进行测试。@brychowitson>感谢您的回复！然后，我必须将图像转换为SVG。你知道有没有简单的方法可以做到这一点吗？你到底想解决什么问题？总有多种解决方案。在地图示例中。我绝对会放置标记，而不是堆叠大量较大的图像。其想法是在悬停时有一个显示感兴趣点的交互式地图。我有一个包含所有这些点的单一图像，我发现更简单的解决方案是将其剪切以隔离点。使用标记将是一个解决方案，但我必须获得所有点的位置，这将是痛苦的-我的意思是，比切割原始图像更痛苦。我建议更新您的问题以反映这一点^^^我将尝试提供一些解决方案。做得好。SVG解决方案与之类似，只是它需要将每个元素转换为SVG边界内自己的定位图像。

div {
    position: relative;
    width: 640px;
    height: 480px;
}

img {
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
}

img:hover {
    border: red 2px solid;
    box-sizing: border-box;
}

<div id="container">

</div>

div {
    position: relative;
    width: 640px;
    height: 480px;
}

canvas {
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
}

.hovered {
    border: red 2px solid;
}

const images = ["Map%20base.png",
    "Cavernes.png",
    "Chemins.png",
    "Points%20d'intérêt.png",
    "Villes.png"
];

const canvasList = [

];

const cssClasses = {
    hovered: 'hovered'
};

function loadImages(container) {
    for(const image of images) {
        const imageContainer = document.createElement('img');
        imageContainer.onload = (img) => {
            const canvas = document.createElement('canvas');
            canvas.width = imageContainer.width;
            canvas.height = imageContainer.height;
            canvas.getContext('2d').drawImage(imageContainer, 0, 0, imageContainer.width, imageContainer.height);
            canvas.onmouseover = onhover;
            canvas.onmousemove = onhover;

            container.appendChild(canvas);
            canvasList.push(canvas);
        };
        imageContainer.src = image;
    }
}

function onhover({target, offsetX, offsetY}) {
    if (!target) return;

    const color = target
        .getContext('2d')
        .getImageData(offsetX, offsetY, 1, 1)
        .data;

    for(const canvas of canvasList) {
        canvas.classList.remove(cssClasses.hovered);
    }

    if (color[3] === 0) {   // Transparent
        const nextCanvas = findNextCanvas(target);
        if (nextCanvas !== null) {
            onhover({target: nextCanvas, offsetX, offsetY});
        }
    } else {
        target.classList.add(cssClasses.hovered);
    }
}

function findNextCanvas(currentCanvas) {
    for(let i in canvasList) {
        if (canvasList[i] === currentCanvas) {
            if (i === 0) return null;
            else return canvasList[i - 1];
        }
    }

    return null;
}

loadImages(document.getElementById('container'));