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

首先，最好有一个可行的问题示例。

无论如何，我出于以下考虑，对您链接的网站和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中看到，“ muxito”涵盖了您的其他元素。相反，在此example中，“ muxito”位于“ lisboaoriente”元素下。

2）您链接的网站未使用“ scale”和“ z-index” css来获取您要实现的结果。他们在外部div上使用transform: translate3d(0px, 0px, 0px);，在内部'section'元素上使用transform: translate3d( 0, 0, -1000px );（所有这些似乎都不在头），因此请考虑使用这些属性。

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

缩放导航网站，不允许将鼠标悬停在背景部分上

1 个答案: