悬停显示交互模型

Question

您好，当我将鼠标悬停在div上或单击一个按钮时，我想显示一个交互式的3D模型。我使用sketchfab来托管模型。

我不能让它工作，它只是出了点问题。有没有办法让div消失，这样当我点击一个按钮时，模型就可以移动了？

更改位置会打乱对齐，更改z索引也不起作用(至少我是这样尝试的)。

我的代码：

​

* {
  margin: 0;
  padding: 0;
  font-family: helvetica;
}

h1 {
  text-align: center;
  font-size: 8vw;
  top: 2vh;
  position: relative;
}

h2 {
  text-align: center;
  font-weight: 400;
  margin-top: 3vh;
  font-size: 2.5vw;
}

.navbar {
  background: rgb(87,235,222);
  background: linear-gradient(135deg, rgba(87,235,222,1) 0%, rgba(174,251,42,1) 100%);
  height: 75vh;
}

.grid-container {
    display: grid;
}

.grid-container--fit {
    grid-template-columns: repeat(auto-fit, minmax(20em, 1fr));
    grid-template-rows: 20em 20em 20em;
}

.grid-element {
  background-color: white;
  color: #fff;
  border: 1px solid #fff;
  position: relative;
}




.test {
  background-color: black;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  z-index: 1;
}

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

  .modell {
  background-color: gray;
  z-index: 2;
}

.modell:hover {
  z-index: 99;
}

<nav>
  <div class="navbar">
  <h1>Lorem ipsum</h1>
  <h2><a >nav1</a> <a>nav2</a> <a>nav3</a> <a>nav4</a> <a>nav5</a></h2>
  </div>
</nav>

<div class="grid-container grid-container--fit">


<div class="grid-element modell">
    <iframe title="Weiterverarbeitung" frameborder="0" width="100%" height="100%" allowfullscreen mozallowfullscreen="true" webkitallowfullscreen="true" allow="fullscreen; autoplay; vr" xr-spatial-tracking execution-while-out-of-viewport execution-while-not-rendered web-share src="https://sketchfab.com/models/faf947997ac4410d9cf264a15dafab82/embed?ui_theme=dark">
    </iframe>
<div class="test">lorem ipsum</div>
</div>

​

Answer 1

您在父元素上设置了hover，然后在子元素上设置了它，因此您的鼠标悬停被搞乱了。只需在悬停父对象时更新.test样式：

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

​

* {
  margin: 0;
  padding: 0;
  font-family: helvetica;
}

h1 {
  text-align: center;
  font-size: 8vw;
  top: 2vh;
  position: relative;
}

h2 {
  text-align: center;
  font-weight: 400;
  margin-top: 3vh;
  font-size: 2.5vw;
}

.navbar {
  background: rgb(87, 235, 222);
  background: linear-gradient(135deg, rgba(87, 235, 222, 1) 0%, rgba(174, 251, 42, 1) 100%);
  height: 75vh;
}

.grid-container {
  display: grid;
}

.grid-container--fit {
  grid-template-columns: repeat(auto-fit, minmax(20em, 1fr));
  grid-template-rows: 20em 20em 20em;
}

.grid-element {
  background-color: white;
  color: #fff;
  border: 1px solid #fff;
  position: relative;
}

.test {
  background-color: black;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  z-index: 1;
}

.modell {
  background-color: gray;
  z-index: 2;
}

.modell:hover {
  z-index: 99;
}

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

<nav>
  <div class="navbar">
    <h1>Lorem ipsum</h1>
    <h2><a>nav1</a> <a>nav2</a> <a>nav3</a> <a>nav4</a> <a>nav5</a></h2>
  </div>
</nav>

<div class="grid-container grid-container--fit">


  <div class="grid-element modell">
    <iframe title="Weiterverarbeitung" frameborder="0" width="100%" height="100%" allowfullscreen mozallowfullscreen="true" webkitallowfullscreen="true" allow="fullscreen; autoplay; vr" xr-spatial-tracking execution-while-out-of-viewport execution-while-not-rendered
      web-share src="https://sketchfab.com/models/faf947997ac4410d9cf264a15dafab82/embed?ui_theme=dark">
    </iframe>
    <div class="test">lorem ipsum</div>
  </div>

​

Answer 2

您可以使用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;
});