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

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-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); 并在内部“部分”使用 transform: translate3d( 0, 0, -1000px ); '元素(似乎都是第一个)，所以考虑使用这些属性。

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