如何在鼠标离开时进行过渡到悬停过渡

Question

我需要使产品的 :hover 状态动画变得漂亮和流畅，最好只使用 css。

我制作了这个代码笔：http://codepen.io/Nitoiti/pen/BLmbZd

.productWrapper {
  width: 235px;
  height: 235px;
}
.info {
  position: relative;
}
.productDescription {
  height: 100%;
  width: 100%;
  overflow: hidden;
  position: absolute;
  opacity: 0;
  transition: all 0.3s ease;
}
.productDescription:hover {
  opacity: 1;
}
.productWrapper .sku {
  font-size: 10px;
  letter-spacing: 2px;
  font-weight: 500;
  margin: 10px 0;
  text-align: center;
  text-transform: uppercase;
}
.hoverBG {
  left: 0;
  position: absolute;
  top: 0;
  background: rgba(0, 163, 196, 1);
  background: -moz-linear-gradient(top, rgba(0, 163, 196, 0.8) 0%, rgba(13, 204, 201, 0.8) 100%);
  background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0, 163, 196, 0.8)), color-stop(100%, rgba(13, 204, 201, 1)));
  background: -webkit-linear-gradient(top, rgba(0, 163, 196, 0.8) 0%, rgba(13, 204, 201, 0.8) 100%);
  background: -o-linear-gradient(top, rgba(0, 163, 196, 0.8) 0%, rgba(13, 204, 201, 0.8) 100%);
  background: -ms-linear-gradient(top, rgba(0, 163, 196, 0.8) 0%, rgba(13, 204, 201, 0.8) 100%);
  background: linear-gradient(to bottom, rgba(0, 163, 196, 0.8) 0%, rgba(13, 204, 201, 0.8) 100%);
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#00a3c4', endColorstr='#0dccc9', GradientType=0);
  height: 100%;
  opacity: 0;
  transition: all 0.3s ease;
  width: 100%;
  z-index: 2;
}
.productDescription {
  z-index: 3;
  left: 0;
  position: absolute;
  top: 0;
  color: #ffffff;
  padding: 15px;
  height: 100%;
  opacity: 0;
  transition: opasity 0.3s linear;
}
.productWrapper:hover .hoverBG {
  opacity: 1;
  //transition:all 0.3s ease 0s;

}
.productWrapper .productDescription .buttonsWrapper a {
  display: block;
  position: relative;
  width: 40px;
  height: 40px;
  line-height: 40px;
  margin-right: 10px;
  text-align: center;
  font-size: 2em;
  color: #fff;
}
.productWrapper .productDescription .buttonsWrapper a .buttonBG {
  background: #09848e none repeat scroll 0 0;
  border-radius: 100%;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  transition: all 0.3s ease 0s;
  width: 100%;
}
.productWrapper .productDescription .buttonsWrapper a:hover .buttonBG {
  background: #005960 none repeat scroll 0 0;
}
.productDescription .buttonsWrapper {
  display: flex;
  justify-content: center;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
}
.productWrapper .productDescription .buttonsWrapper a:last-child {
  margin-right: 0px;
}
.buttonsWrapper a {
  margin-top: 150px;
  transition: margin-top 0.1s 0.15s, transform 0.3s 0.2s;
}
.buttonsWrapper a:nth-child(2) {
  transition: margin-top 0.2s 0.15s, transform 0.3s 0.35s;
}
.buttonsWrapper a:nth-child(3) {
  transition: margin-top 0.3s 0.15s, transform 0.3s 0.45s;
}
.productWrapper:hover .buttonsWrapper a {
  margin-top: 0px;
  transform: translatey(20%);
}
.productWrapper .sku {
  margin-top: 10px;
  transition: margin-top 0.1s 0.15s, transform 0.3s 0.2s;
}
.productWrapper:hover .sku {
  margin-top: 25px;
  transform: translatey(-5px);
}
.buttonsWrapper {
  height: 40px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="productWrapper">
  <div class="info">
    <img src="http://test2.grey-cat.biz/img/image-square-3.png">
    <div class="hoverBG"></div>
    <div class="productDescription">
      <div class="sku">SKU: 3610</div>
      <div class="buttonsWrapper">
        <a href="#">
          <span class="buttonBG"></span> 1
        </a>
        <a href="#">
          <span class="buttonBG"></span> 2
        </a>
        <a href="#">
          <span class="buttonBG"></span> 3
        </a>
      </div>
    </div>
  </div>
</div>

当您将鼠标悬停在图片上时会发生什么： 1. 在 0.3 秒内，背景不透明度变为 1，并且变得可见。 2. 按钮一个接一个的上滑，延时很短。

当您将鼠标移出按钮时，背景就会消失。 我需要的是按钮以相反的顺序向下滑动，然后背景淡出。换句话说，我需要动画与悬停相反。

我尝试对 :hover 和正常状态使用不同的过渡效果，但没有成功。是否可以仅使用 css 来做到这一点？

Answer 1

我看到一个错字：opasity。

这是在.productDescription 规则中：

transition: opasity 0.3s linear;

.productDescription 中的转换适用于退出不同状态（悬停、聚焦等）。当光标悬停在元素之外时，拼写错误阻止了属性动画回到它们的非悬停值。

我已经复制了你的 sn-p 并更正了：

.productWrapper {
  width: 235px;
  height: 235px;
}
.info {
  position: relative;
}
.productDescription {
  height: 100%;
  width: 100%;
  overflow: hidden;
  position: absolute;
  opacity: 0;
  transition: all 0.3s ease;
}
.productDescription:hover {
  opacity: 1;
}
.productWrapper .sku {
  font-size: 10px;
  letter-spacing: 2px;
  font-weight: 500;
  margin: 10px 0;
  text-align: center;
  text-transform: uppercase;
}
.hoverBG {
  left: 0;
  position: absolute;
  top: 0;
  background: rgba(0, 163, 196, 1);
  background: -moz-linear-gradient(top, rgba(0, 163, 196, 0.8) 0%, rgba(13, 204, 201, 0.8) 100%);
  background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0, 163, 196, 0.8)), color-stop(100%, rgba(13, 204, 201, 1)));
  background: -webkit-linear-gradient(top, rgba(0, 163, 196, 0.8) 0%, rgba(13, 204, 201, 0.8) 100%);
  background: -o-linear-gradient(top, rgba(0, 163, 196, 0.8) 0%, rgba(13, 204, 201, 0.8) 100%);
  background: -ms-linear-gradient(top, rgba(0, 163, 196, 0.8) 0%, rgba(13, 204, 201, 0.8) 100%);
  background: linear-gradient(to bottom, rgba(0, 163, 196, 0.8) 0%, rgba(13, 204, 201, 0.8) 100%);
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#00a3c4', endColorstr='#0dccc9', GradientType=0);
  height: 100%;
  opacity: 0;
  transition: all 0.3s ease;
  width: 100%;
  z-index: 2;
}
.productDescription {
  z-index: 3;
  left: 0;
  position: absolute;
  top: 0;
  color: #ffffff;
  padding: 15px;
  height: 100%;
  opacity: 0;
  transition: opacity 0.3s linear;
}
.productWrapper:hover .hoverBG {
  opacity: 1;
  //transition:all 0.3s ease 0s;

}
.productWrapper .productDescription .buttonsWrapper a {
  display: block;
  position: relative;
  width: 40px;
  height: 40px;
  line-height: 40px;
  margin-right: 10px;
  text-align: center;
  font-size: 2em;
  color: #fff;
}
.productWrapper .productDescription .buttonsWrapper a .buttonBG {
  background: #09848e none repeat scroll 0 0;
  border-radius: 100%;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  transition: all 0.3s ease 0s;
  width: 100%;
}
.productWrapper .productDescription .buttonsWrapper a:hover .buttonBG {
  background: #005960 none repeat scroll 0 0;
}
.productDescription .buttonsWrapper {
  display: flex;
  justify-content: center;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
}
.productWrapper .productDescription .buttonsWrapper a:last-child {
  margin-right: 0px;
}
.buttonsWrapper a {
  margin-top: 150px;
  transition: margin-top 0.1s 0.15s, transform 0.3s 0.2s;
}
.buttonsWrapper a:nth-child(2) {
  transition: margin-top 0.2s 0.15s, transform 0.3s 0.35s;
}
.buttonsWrapper a:nth-child(3) {
  transition: margin-top 0.3s 0.15s, transform 0.3s 0.45s;
}
.productWrapper:hover .buttonsWrapper a {
  margin-top: 0px;
  transform: translatey(20%);
}
.productWrapper .sku {
  margin-top: 10px;
  transition: margin-top 0.1s 0.15s, transform 0.3s 0.2s;
}
.productWrapper:hover .sku {
  margin-top: 25px;
  transform: translatey(-5px);
}
.buttonsWrapper {
  height: 40px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="productWrapper">
  <div class="info">
    <img src="http://test2.grey-cat.biz/img/image-square-3.png">
    <div class="hoverBG"></div>
    <div class="productDescription">
      <div class="sku">SKU: 3610</div>
      <div class="buttonsWrapper">
        <a href="#">
          <span class="buttonBG"></span> 1
        </a>
        <a href="#">
          <span class="buttonBG"></span> 2
        </a>
        <a href="#">
          <span class="buttonBG"></span> 3
        </a>
      </div>
    </div>
  </div>
</div>