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

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 );内部“部分”元素上使用（全部出第一个似乎），因此请考虑使用这些属性。让我知道这是否对您有足够的帮助。