离开鼠标的过渡

Posted 2023-05-08

【中文标题】离开鼠标的过渡

【英文标题】：Transition on leaving mouse

【发布时间】：2017-07-14 03:50:15

【问题描述】：

我正在尝试进行一些过渡。

目前我的块有 3 个部分：

基块 悬停图像（来自顶部） 悬停标题（来自机器人）

鼠标悬停时，背景颜色也会发生变化。

鼠标到达时一切正常，目标是在光标离开时制作相同的反向动画。

#studio 
  margin-top:50px;
  margin-left:50x;


#studio #portfolie 
  position: relative;
  z-index: 10;

#studio #portfolie .content-porfolio 
  text-align: center;
  width: 800px;
  margin: 0 auto 140px;

#studio #portfolie .project-title--hover 
  bottom: -19px;
  transition: bottom .7s ease;

#studio #portfolie .project-logo--hover 
  margin-top: -100px;
  transition: margin-top 0.7s ease;

#studio #portfolie .md-trigger:hover .project-title--hover 
  display: block !important;
  bottom: 25px;

#studio #portfolie .md-trigger:hover .project-logo--hover 
  display: block !important;
  width: 70%;
  margin-left: 15%;
  height: 100px;
  background-repeat: no-repeat;
  margin-top: calc((25%-attr(height))/2);
  background-size: contain;
  background-position: center;
  position: absolute;
  overflow: hidden;

#studio #portfolie .project-logo--base 
  height: 100%;
  width: 100%;
  background-repeat: repeat;
  position: absolute;
  overflow: hidden;

#studio #portfolie .hover-container 
  transition: background-color 0.5s ease;
  background-color: transparent;

#studio #portfolie .md-trigger:hover .hover-container 
  background-color: #F1CE34;
  height: 100%;
  width: 100%;
  position: absolute;

#studio #portfolie .content-play 
  margin-bottom: 15px;
  position: relative;
  z-index: 2;

#studio #portfolie .content-play .slide 
  display: none;

#studio #portfolie .content-play > * 
  width: calc(100% * 1 / 3 - 40px);

#studio #portfolie .content-play .play 
  height: 200px;
  cursor: pointer;
  position: relative;
  color: #FFF;
  text-transform: uppercase;
  margin-bottom: 40px;

#studio #portfolie .content-play .play span 
  font-size: 0.8em;
  position: absolute;
  font-family: 'ProximaNovaA-Black';
  left: 50%;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
  display: block;
  width: 100%;

<section id="studio">
<div id="portfolie">
<ul class="content-play clearfix grid-3">
  <li data-modal="modal-video-1" class="first play md-trigger slide" id="first-play" style="display: list-item;">
    <div class="project-logo--base" style="background-image: url(http://storage.tvanouvelles.ca/v1/dynamic_resize/sws_path/tvanouvelles_prod/bc7caa6d-8748-495c-8522-a7fc17513ce7_ORIGINAL.jpg?quality=80&size=800x&version=0)">
      <div class="hover-container">
        <div class="project-logo--hover" style="background-image: url(http://www.esoterisme-exp.com/File_images/2012/1205/Carre-bleu.png)"></div>
        <span class="project-title--hover">Tennis festival</span>
      </div>
    </div>
  </li>
</ul>
</div>
</section>

here is the same on CodePen because it looks easier to modify

【问题讨论】：

试试这个daneden.github.io/animate.css

【参考方案1】：

你可以使用:not(:hover)伪类。

如果你的问题是蓝色方块没有恢复，那么试试这样：

#studio #portfolie .project-logo--hover 
  top: -100px;
  transition: top .7s ease;
  width: 70%;
  margin-left: 15%;
  height: 100px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  position: absolute;

#studio #portfolie .md-trigger:hover .project-title--hover 
  display: block !important;
  bottom: 25px;

#studio #portfolie .md-trigger:hover .project-logo--hover 
  display: block !important;
  top: calc((25%-attr(height))/2);

#studio #portfolie .hover-container 
  transition: background 0.7s linear;
  background-color: #FDF200;
  height: 100%;
  width: 100%;
  position: absolute;

#studio #portfolie .md-trigger:hover .hover-container 
  background-color: #F1CE34;

【讨论】：

这看起来像是一个不错的 CSS 选择器，但它只与 12% of browsers 兼容，所以在这里它不能成为我的解决方案：/

我已经编辑了我的答案，因为它太大了，无法发表评论

顶部现在可以正确滑出 :) 最后一件事，背景看起来仍然会立即消失？

我重新编辑了答案并更改了 hover-container 类，所以现在背景颜色应该没问题了。原则上，您应该将项目的所有构建样式设置为正常状态，而在悬停状态下仅设置更改的样式。

【参考方案2】：

查看“扫到顶部”背景转换here 和here。我认为它可以满足您的需求。