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

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 以获得您的结果。

正如你从这个例子中看到的，'muxito' 覆盖了你的其他元素。相反，在这个示例中， “muxito”位于“lisboaoriente”元素下。

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

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