将鼠标悬停在伪元素上时触发 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

仅 CSS 方法可以通过将标题标记（即您的<h1>和标签）与现有页面结构中的<p>相应视频元素嵌套来实现：

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

通过执行此操作，您可以指定 CSS 来修改transform新引入的.caption元素（每个视频）的属性，以便相应字幕的“y 翻译”在0%和之间切换100%，具体取决于用户交互。

为了在翻译这些标题时实现平滑的动画效果，该transition属性被应用到transform属性：

transition: transform ease-in-out 0.5s

这样做会使标题在变换值发生变化时在不同的变换之间平滑地呈现动画。

在代码中，该解决方案可以实现为：

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

transition: transform ease-in-out 0.5s