将鼠标悬停在伪元素上时触发CSS动画吗? [英] Trigger CSS animation when hovering over pseudo element?

问题描述

当试图将伪元素悬停时，我试图触发CSS动画.

I am attempting to trigger CSS animations when a pseudo element is hovered.

我目前有2个视频，这些视频根据鼠标悬停在浏览器的50％一侧来显示，我想应用类似的效果来为某些文本添加动画.

I currently have 2 videos that show depending which 50% side of the browser the mouse is hovering and I want to apply a similar effect to animate some text.

我希望&p; p> 标记同时向上移动并淡入，同时以相同的方式向上移动< h1> 标记，喜欢这个网站:

I want the <p> tag to move up and fade in while moving the <h1> tag up at the same time and in the same way, like this website:

https://seedlipdrinks.com/uk/

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

Here's the kind of structure I'm working with for my <p> and <h1> tags:

<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;并删除或添加填充，具体取决于鼠标是在屏幕的左侧还是右侧(如我所引用的网站)

Example of code for text animation. I want the h1 and p tags to begin with padding-top: 100px; and remove or add padding depending on whether mouse is hovering left or right side of the screen like the website I referenced

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

推荐答案

仅CSS的方法可以通过嵌套标题标记(即您的< h1> 和<p> 标记)与您现有页面结构中的相应视频元素:

A CSS-only approach can be achieved by nesting the caption markup (ie your <h1> and <p> tags) with the corresponding video elements in your existing page structure:

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

这样做，您可以指定修改 <(每个视频的)新引入的 .caption 元素的code> transform 属性，以便相应字幕的"y翻译"在 0％和 100％，具体取决于用户的互动情况.

By doing this, you can then specify CSS that modifies the transform property of the newly introduced .caption element (of each video) so that the "y translation" of respective captions are toggled between 0% and 100%, depending on the user interaction.

要在翻译字幕时获得平滑的动画效果，请

To achieve a smooth animated effect when those captions are translated, the transition property is applied to the transform property:

transition: transform ease-in-out 0.5s

这样做会导致字幕在转换值更改时在不同的转换之间平滑地进行动画处理.

Doing this causes the caption to smoothly animate between differenet transforms when the transform value changes.

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

In code, this solution can be implemented as:

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

这篇关于将鼠标悬停在伪元素上时触发CSS动画吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！