缩放导航网站，不让悬停在背景部分工作

Question

有关更多详细信息，我将在此处列出我网站的所有内容：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，但它似乎不是问题所在。。

Answer 1

首先，最好有一个问题的工作示例。

无论如何，我已经看了你链接的网站和你在谷歌驱动器中提供的代码，下面是一些注意事项。

1( ">我无法使用，在第二部分(lisboaoriente(和第二部分之后，任何图像悬停或音频按钮，就像第一部分(muxito(一样，正在覆盖它"：
因为您正在用id为"muxito"的html元素div覆盖其他部分。

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

正如您从上面的代码中可以看到的那样，您将z索引放在元素上，id"muxito"具有更高的z索引。这意味着元素"muxito"将凌驾于其他元素之上。您应该考虑在"muxito"上放置一个较低的z索引，以获得您的结果。

正如您从这个例子中看到的，"muxito"涵盖了您的其他元素。相反，在本例中，"muxito"位于"lisboaoriente"元素之下。

2( 你链接的网站没有使用"scale"one_answers"z-index"css来获得你想要实现的结果。他们在外部div上使用transform: translate3d(0px, 0px, 0px);，在内部"section"元素上使用transform: translate3d( 0, 0, -1000px );(看起来都是第一个(，所以考虑使用这些属性。

如果这对你有足够的帮助，请告诉我。