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

Question

更多详细信息，我会把我网站的所有内容放在这里：https://drive.google.com/drive/folders/14s70DIjtTBVbosj67TbRSbZsN4KUJma7?usp=sharing

我的网站受到这种 http://2011.beercamp.com/ 导航结构的启发，问题是我无法在第二部分（lisboaoriente）和之后的部分应用任何图像悬停或音频按钮，就像第一部分（muxito）一样，覆盖它，所以鼠标感觉不到背面divs。

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

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

无论如何，我查看了您链接的网站和您在 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, the 'muxito' is covering your other elements. Instead in this one example可以看出，'muxito'在'lisboaoriente'元素下。

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

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

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

Zoom navigating website, not letting hover on background sections work

html

css

java

navigation

zooming