java - 缩放导航网站，不允许将鼠标悬停在背景部分上

有关更多详细信息，我将在此处保留我网站的所有内容：https://drive.google.com/drive/folders/14s70DIjtTBVbosj67TbRSbZsN4KUJma7?usp=sharing



我的网站受到这种http://2011.beercamp.com/导航结构的启发，问题是我无法在第二部分（lisboaoriente）上使用，之后，任何图像悬停或音频按钮都类似于第一部分（muxito ）遮盖住它，因此鼠标不会感觉到背面的div。

div不起作用的示例：

 #img2 {
    background-image: url(img/caminhoferro.png);
    background-repeat: no-repeat;
    width: 876px;
    height: 650px;
    background-size: cover;
    position: absolute;
    top: -348px;
    left: 188px;
    transform: rotate(-90deg);
 }


#img2:hover {
background-image: url(img/orienteover.png);
    background-repeat: no-repeat;
    background-size: cover;
   width: 755px;
    height: 400px;
    position: absolute;
   top: -288px;
    left: 258px;
}

我试着看一下java，但这似乎不是问题..

最佳答案

首先，最好有一个可行的问题示例。

无论如何，我会根据一些注意事项来介绍您所链接的网站以及您在google驱动器中提供的代码。

1）“我不能在第二部分（lisboaoriente）上滑动，之后，任何图像悬停或音频按钮都像第一部分（muxito）一样被覆盖”：
 因为您将使用ID为'muxito'的html元素div覆盖其他部分。

#muxito {
    color: white;
    z-index: 100;
}
#lisboaoriente {
    color: white;
    z-index: 90;
}

从上面的代码中可以做到这一点，您可以将z-index放在元素上，而id'muxito'具有更高的z-index。这意味着元素“ muxito”将位于其他元素之上。您应该考虑在“ muxito”上放置较低的z-index以获得结果。

从example中可以看到，“ muxito”覆盖了您的其他元素。取而代之的是，example“ muxito”在“ lisboaoriente”元素下。

2）您链接的网站没有使用“ scale”和“ z-index” css来获取您想要获得的结果。他们在外部div上使用transform: translate3d(0px, 0px, 0px);，在内部的“ section”元素上使用transform: translate3d( 0, 0, -1000px );（所有这些似乎都不存在），因此请考虑使用这些属性。

让我知道这是否对您有足够的帮助。