Html 悬停显示交互模型

您好，当我将鼠标悬停在div上或单击按钮时，我想显示一个交互式三维模型。我使用sketchfab来主持模型

我不能完全让它工作，只是出故障了。 是否有办法使div消失，以便在单击按钮时模型可以移动

更改位置会弄乱对齐，更改z索引也不起作用（至少我是如何尝试的）

我的代码：

*{
保证金：0；
填充：0；
字体系列：helvetica；
}
h1{
文本对齐：居中；
字体大小：8vw；
顶部：2vh；
位置：相对位置；
}
氢{
文本对齐：居中；
字体大小：400；
边际上限：3vh；
字体大小：2.5vw；
}
navbar先生{
背景：rgb（87235222）；
背景：线性梯度（135度，rgba（87235222,1）0%，rgba（174251,42,1）100%）；
高度：75vh；
}
.网格容器{
显示：网格；
}
.网格容器--安装{
网格模板列：重复（自动拟合，最小值（20em，1fr））；
网格模板行：20em 20em 20em；
}
.网格元素{
背景色：白色；
颜色：#fff；
边框：1px实心#fff；
位置：相对位置；
}
.测试{
背景色：黑色；
宽度：100%；
身高：100%；
位置：绝对位置；
顶部：0px；
z指数：1；
}
.测试：悬停{
不透明度：0；
z指数：-1；
}
莫代尔先生{
背景颜色：灰色；
z指数：2；
}
.modell:悬停{
z指数：99；
}

乱数假文
导航1导航2导航3导航4导航5
乱数假文

您可以使用JavaScript来实现：

document.querySelector(".modell").addEventListener("mouseenter",()=>{
    document.querySelector("iframe").style.display = "block";
    document.querySelector(".test").style.display = "none";
 });

document.querySelector(".modell").addEventListener("mouseleave",()=>{
    document.querySelector("iframe").style.display = "none";
    document.querySelector(".test").style.display = "block;
});

---

您在父元素上设置了

悬停

，然后在子元素上设置了悬停，因此您的悬停被弄乱了。将鼠标悬停在父项上时，只需更新

。测试
样式即可：

.modell:hover .test {
  opacity: 0;
  z-index: -1;
}


*{
保证金：0；
填充：0；
字体系列：helvetica；
}
h1{
文本对齐：居中；
字体大小：8vw；
顶部：2vh；
位置：相对位置；
}
氢{
文本对齐：居中；
字体大小：400；
边际上限：3vh；
字体大小：2.5vw；
}
navbar先生{
背景：rgb（87235222）；
背景：线性梯度（135度，rgba（87235221,1）0%，rgba（174251,42,1）100%）；
高度：75vh；
}
.网格容器{
显示：网格；
}
.网格容器--安装{
网格模板列：重复（自动拟合，最小值（20em，1fr））；
网格模板行：20em 20em 20em；
}
.网格元素{
背景色：白色；
颜色：#fff；
边框：1px实心#fff；
位置：相对位置；
}
.测试{
背景色：黑色；
宽度：100%；
身高：100%；
位置：绝对位置；
顶部：0px；
z指数：1；
}
莫代尔先生{
背景颜色：灰色；
z指数：2；
}
.modell:悬停{
z指数：99；
}
.modell:hover.test{
不透明度：0；
z指数：-1；
}

乱数假文
导航1导航2导航3导航4导航5
乱数假文
它说它期望“）”而不是原始的“文档”，我编辑了我的答案。现在试试。这很有效，谢谢！没问题。如果答案有帮助，不要忘记接受；）