html - Iframe 悬停时视频波动

Question

我有一个类为“card1”和“card2”的 div，其中使用了一个 iframe。我将悬停应用于“card1”和“card2”，以便在我悬停时它会上升，但问题是当我悬停时它会波动。

你会在这里很容易理解它:https://codesandbox.io/s/scapic-hovering-cards-34xif

我尝试对 iframe 中的“video”类执行指针事件:无，它工作正常，但由于指针事件:无工作，它禁用了事件。

.container {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      display: flex;
    }
    
    .card1 {
      border: 1px solid #cccccc;
      position: relative;
      width: 300px;
      background-color: rgba(242, 242, 242, 0.5);
      border-radius: 10px;
      height: 200px;
      z-index: 1;
      margin-top: 60px;
      top: 0;
      transition: top ease 0.5s;
      transform: perspective(260px) rotateY(-28deg);
    }
    
    .card1:hover {
      top: -10px;
    }
    
    .card2 {
      border: 1px solid #cccccc;
      position: relative;
      transition: top ease 0.5s;
      width: 300px;
      background-color: rgba(242, 242, 242, 0.5);
      border-radius: 10px;
      top: 0;
      height: 200px;
      transform: perspective(290px) rotateY(20deg);
    }
    
    .card2:hover {
      top: -10px;
    }
    
    .video {
      margin-top: 30px;
      border-radius: 0 0 10px 10px;
    }

  <div class=container>
      <div class="card1">
        <div>
          <iframe class="video" width="300" height="170" 
           src="https://www.youtube.com/embed/6oFvqLfRnsU" frameborder="0" a 
           llow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in- 
           picture" allowfullscreen></iframe>
        </div>
       </div>
       <div class="card2">
         <div>
           <iframe class="video" width="300" height="170" 
           src="https://www.youtube.com/embed/R84JU3B0jqo" frameborder="0" 
           allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in- 
           picture" allowfullscreen></iframe>
         </div>
       </div>
    </div>
    

我希望卡片在悬停时保持稳定，不应该波动。

如果有人能帮我解决这个问题，那将是一个很大的帮助。

Answer 1

请检查一下。

我将 card1 和 card2 放在两个单独的容器 card1-container 和 card2-container 中并添加它们的悬停效果会影响 card1 和 card2

我还删除了 card1 和 card2 上的直接悬停效果

这似乎解决了我的问题。但是你可以做更多的研究来改善这一点。

此外，Check this question's answer

body {
  font-family: sans-serif;
}

.container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
}

.card1-container:hover>.card1 {
  top: -10px;
}

.card2-container:hover>.card2 {
  top: -10px;
}

.card1 {
  border: 1px solid #cccccc;
  position: relative;
  width: 300px;
  background-color: rgba(242, 242, 242, 0.5);
  border-radius: 10px;
  height: 200px;
  z-index: 1;
  margin-top: 60px;
  top: 0;
  transition: all ease 0.5s;
  transform: perspective(260px) rotateY(-28deg);
}

.card2 {
  border: 1px solid #cccccc;
  position: relative;
  transition: all ease 0.5s;
  width: 300px;
  background-color: rgba(242, 242, 242, 0.5);
  border-radius: 10px;
  top: 0;
  height: 200px;
  transform: perspective(290px) rotateY(20deg);
}

.video {
  margin-top: 30px;
  border-radius: 0 0 10px 10px;
}

<div class="container">
  <div class="card1-container">
    <div class="card1">
      <div>
        <iframe class="video" width="300" height="170" src="https://www.youtube.com/embed/6oFvqLfRnsU" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        <!-- <iframe class="video" width="300" height="170" src="https://www.youtube.com/embed/vFp2XjmoE3o" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> -->
      </div>
    </div>
  </div>
  <div class="card2-container">
    <div class="card2">
      <div>
        <!-- <iframe class="video" width="300" height="170" src="https://www.youtube.com/embed/mMHEqjsbR7E" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                       -->
        <iframe class="video" width="300" height="170" src="https://www.youtube.com/embed/R84JU3B0jqo" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
      </div>
    </div>
  </div>
</div>