Html 离开鼠标时的过渡

我正在努力做一些转变

目前，我的街区由3部分组成：

基块

悬停图像（来自顶部）

悬停标题（来自bot）

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

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

#工作室{
边缘顶部：50px；
左边距：50倍；
}
#工作室#portfolie{
位置：相对位置；
z指数：10；
}
#工作室#文件夹。内容文件夹{
文本对齐：居中；
宽度：800px；
保证金：0自动140px；
}
#工作室#portfolie。项目名称——悬停{
底部：-19px；
过渡：底部。7秒缓解；
}
#工作室#portfolie.项目徽标--悬停{
利润上限：-100px；
过渡：利润率最高0.7秒；
}
#studio#portfolie.md触发器：hover.project title——hover{
显示：块！重要；
底部：25px；
}
#studio#portfolie.md触发器：hover.project徽标--hover{
显示：块！重要；
宽度：70%；
左边距：15%；
高度：100px；
背景重复：无重复；
边缘顶部：计算（（25%属性（高度））/2）；
背景尺寸：包含；
背景位置：中心；
位置：绝对位置；
溢出：隐藏；
}
#工作室#portfolie.项目标志——基地{
身高：100%；
宽度：100%；
背景重复：重复；
位置：绝对位置；
溢出：隐藏；
}
#工作室#portfolie.悬停容器{
过渡：背景色0.5s；
背景色：透明；
}
#studio#portfolie.md触发器：悬停。悬停容器{
背景色：#F1CE34；
身高：100%；
宽度：100%；
位置：绝对位置；
}
#工作室#portfolie.内容播放{
边缘底部：15px；
位置：相对位置；
z指数：2；
}
#工作室#portfolie.内容播放.幻灯片{
显示：无；
}
#工作室#portfolie.内容播放>*{
宽度：计算（100%*1/3-40px）；
}
#工作室#portfolie.内容播放.播放{
高度：200px；
光标：指针；
位置：相对位置；
颜色：#FFF；
文本转换：大写；
边缘底部：40px；
}
#工作室#portfolie.内容播放.播放跨度{
字号：0.8em；
位置：绝对位置；
字体系列：“Proximanova黑色”；
左：50%；
-webkit转换：translateX（-50%）；
-moz变换：translateX（-50%）；
-ms转换：translateX（-50%）；
-o-转换：translateX（-50%）；
转化：translateX（-50%）；
显示：块；
宽度：100%；
}

网球节

您可以使用

：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选择器，但它与兼容，所以它不能成为我的解决方案：/I我编辑了我的答案，因为它太大了，无法添加注释。顶部部分现在正确滑出：）最后一件事，背景看起来仍然会立即消失？我重新编辑了我的答案，并更改了悬停容器类，所以现在背景颜色应该可以了。原则上，应将项目的所有建筑样式设置为“正常”状态，而仅将更改的样式设置为“悬停”状态。