如何在鼠标上进行转换，使其转换为悬停转换

时间：2016-10-04 19:57:15

标签： html css css3

我需要制作产品动画：悬停状态很好，流畅，最好只使用css。

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

＆＃13;
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

将鼠标悬停在图片上时会发生什么：  1.在0,3s中，背景不透明度变为1并且变得可见。  2.按钮会在短时间内一个接一个地滑动。

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

我尝试使用不同的过渡效果：悬停和正常状态，但没有设法让它工作。是否可以仅使用css执行此操作？

1 个答案:

答案 0 :(得分：1)

我看到一个拼写错误：opasity。

这是.productDescription规则：

transition: opasity 0.3s linear;

.productDescription的转换适用于 out 的其他状态（悬停，焦点等）。当光标悬停在元素上时，错字会阻止属性动画回到非悬停值。

我复制了你的代码片段并更正了：

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

相关问题
最新问题