css - 将鼠标悬停在伪元素上时触发 CSS 动画？

Question

我试图在悬停伪元素时触发 CSS 动画。

我目前有 2 个视频显示，具体取决于鼠标悬停在浏览器的哪 50% 一侧，我想应用类似的效果来为一些文本设置动画。

我想要 <p>在移动 <h1> 时向上移动并淡入的标签同时以同样的方式标记，就像这个网站:

https://seedlipdrinks.com/uk/

这是我为我的 <p> 使用的结构和 <h1>标签:

<div class="caption_overlay">
    <div class="caption_grid">
      <div class="live_caption">

        <h1>A mix of apartments and terrace homes</h1>

        <a href="#"><p>Explore</p></a>

        </div>

        <div class="eat_caption">

        <h1>A brand new public eat street</h1>

        <a href="#"><p>Explore</p></a>

      </div>

    </div>    
</div>

CSS

视频的当前代码

.video_hover {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

.video_hover::before {
  content:"";
  display:block;
  width:50%;
  height:100%; 
  position: absolute;
  top: 0;
  z-index:100;
}

.video_hover video {
  display:block;
  width: 100%;
  height: 100%;
}

.live_video:hover video {
  opacity:0;
} 

.live_video::before {
  right: 0;
}

.live_video:hover + .eat_video video {
  opacity:1; 
} 

.eat_video video {
  opacity:0;
} 

.eat_video::before {
  left: 0;
}

文本动画代码示例。我希望 h1 和 p 标签以 padding-top: 100px; 开头。并删除或添加填充，具体取决于鼠标是像我引用的网站一样悬停在屏幕的左侧还是右侧

.live_caption h1:hover, .eat_caption h1:hover {
  padding-top: 0px;
  -webkit-transition: .4s ease-in-out opacity;
  -moz-transition: .4s ease-in-out opacity;
  -o-transition: .4s ease-in-out opacity;
  transition: .4s ease-in-out opacity;
}

.live_caption p:hover, .eat_caption p:hover  {
  padding-top: 0px;
  opacity: 1;
  -webkit-transition: .4s ease-in-out opacity;
  -moz-transition: .4s ease-in-out opacity;
  -o-transition: .4s ease-in-out opacity;
  transition: .4s ease-in-out opacity;
}

Answer 1

通过将字幕标记(即您的 <h1> 和 <p> 标签)与相应的视频元素 in your existing page structure 嵌套，可以实现纯 CSS 方法。 :

<div class="live_video video_hover">
  <video muted class="video" autoplay="autoplay" loop="loop" preload="auto">
    <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" >
 </video>

 <!-- Nest caption block with live_video video block -->
 <div class="caption">
   <h1>A mix of apartments and terrace homes</h1>
   <a href="#">
     <p>Explore</p>
   </a>
 </div>

</div>

通过这样做，您可以指定修改 transform 的 CSS新引进的属性(property).caption元素(每个视频的)，以便各个字幕的“y 翻译”在 0% 之间切换和 100% ，取决于用户交互。

为了在翻译这些字幕时实现流畅的动画效果， transition 属性应用于 transform属性:

transition: transform ease-in-out 0.5s

这样做会导致字幕在变换值发生变化时在不同变换之间平滑地动画。

在代码中，这个解决方案可以实现为:

.video_hover {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  cursor: pointer;
  /* Add this */
  overflow: hidden;
}

.video_hover video {
  display: block;
  width: 100%;
  height: 100%;
}

.video_hover::before {
  content: "";
  display: block;
  width: 50%;
  height: 100%;
  position: absolute;
  top: 0;
  z-index: 100;
}

.live_video::before {
  left: 0;
}

.eat_video::before {
  right: 0;
}

.eat_video video {
  visibility: hidden;
}

.live_video:hover video {
  visibility: hidden;
}

.live_video:hover+.eat_video video {
  visibility: visible;
}


/* New CSS begins */


/* Define common styling for caption blocks of either video */

.caption {
  position: absolute;
  bottom: 0;
  width: 50%;
  z-index: 150;
  transition: transform ease-in-out 0.5s;
  background: pink;
  pointer-events: none;
}


/* Live video caption visible by default (out of view) */

.live_video .caption {
  left: 0;
  transform: translateY(100%);
}


/* Eat video caption hidden by default (out of view) */

.eat_video .caption {
  right: 0;
  transform: translateY(100%);
}


/* Animate eat video caption into view when hovering the pesudo element */

.live_video:hover .caption {
  transform: translateY(0%);
}


/* Animate live video caption out of view when hovering the pesudo element */

.eat_video:hover .caption {
  transform: translateY(0%);
}

<div class="live_video video_hover">
  <video muted class="video" autoplay="autoplay" loop="loop" preload="auto">
    <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" >
 </video>
  <!-- Nest caption block with corresponding video to display with -->
  <div class="caption">
    <h1>A mix of apartments and terrace homes</h1>
    <a href="#">
      <p>Explore</p>
    </a>
  </div>
</div>
<div class="eat_video video_hover">
  <video muted class="video" autoplay="autoplay" loop="loop" preload="auto">
    <source src="https://www.fbdemo.com/video/video/demo.mp4" type="video/mp4" >
 </video>
  <!-- Nest caption block with corresponding video to display with -->
  <div class="caption">
    <h1>A brand new public eat street</h1>
    <a href="#">
      <p>Explore</p>
    </a>
  </div>
</div>