Question

对于一个小小的私人项目，我有一个由多个图像组成的地图，相互叠加，每个图像都有一个不同的透明部分，所以它们一起构成了地图。所有图像都具有相同的大小，从0,0开始（以便于对齐）。

现在为不同部分设置弹出窗口会很不错，但显然只有最顶层的图像才能获得所有鼠标悬停...

<p style="position:relative">

    <img id="de_background" src="background.gif" style="position:absolute;left:0px;right:0px"/>
    <img id="de_10" src="1.gif" style="position:absolute;left:0px;right:0px" title="Title 1"/>
    <img id="de_12" src="2.gif" style="position:absolute;left:0px;right:0px" title="Title 2"/>

那么，是否有一个聪明的技巧允许hover / popus也用于不透明的图像部分？我可以通过JavaScript以某种方式询问“这里的哪些图像在这一点上不透明？”。

Answer 1

你在CSS属性中设置透明还是gif图像是透明的吗？顺便说一下，你没有写过元素z-index

Answer 2

除了第一个元素之外，只需对要隐藏的所有元素使用显示CSS属性。您甚至可以通过JS应用CSS属性，并在隐藏和可见的之间切换。

.hiddenImg {
    display: none;
}

更多信息：http://www.w3schools.com/css/css_display_visibility.asp

多层图像上的HTML / JS弹出

2 个答案: