时间戳

首页 > 解决方案 > 视频在 iframe 悬停时波动

html - 视频在 iframe 悬停时波动

问题描述

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

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

我尝试对 iframe 内的“视频”类执行指针事件：无，它工作正常，但由于指针事件：无工作，它正在禁用事件。

.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>

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

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

标签： htmlcss

解决方案

我已尝试通过解决方法解决您的问题。

我做了什么？我在container和之间添加了两个容器盒（一个用于卡片） card。现在，当您的光标位于具有 class:hover的元素上时，选择器的事件被激活。divtrick-container

这如何解决问题？当您的光标位于具有类trick-container的元素上时，元素内的内容会向上移动，而不是元素本身，这样选择器事件:hover不会丢失并且内容不会被放下。

HTML：

<div class=container>
        <div class="trick-container">
            <div class="card1-container">
                    <div class="card1">
                            <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="trick-container2">
            <div class="card2-container">
                <div class="card2">
                    <!-- <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>

CSS：

.trick-container {
  padding-top: 60px;
  transform: perspective(260px) rotateY(-28deg);
}
.trick-container2 {
  height: 205px;
  transform: perspective(290px) rotateY(20deg);
}

.card1-container {
  border: 1px solid #cccccc;
  position: relative;
  width: 300px;
  background-color: rgba(242, 242, 242, 0.5);
  border-radius: 10px;
  height: 200px;
  z-index: 1;
  top: 0;
  transition: top 0.5s ease-in;
}

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

.card2-container {
  border: 1px solid #cccccc;
  position: relative;
  width: 300px;
  background-color: rgba(242, 242, 242, 0.5);
  border-radius: 10px;
  height: 200px;
  top: 0;
  transition: top 0.5s ease-in;
}

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

您可以在此处检查您的返工代码： https ://codesandbox.io/s/6zilz

让我知道这是否解决了您的问题和/或您是否以其他方式解决了问题！如果需要，还请我进一步解释。

推荐阅读