Question

转换有问题，我不知道为什么？

Ease确实对鼠标有效，但在鼠标输出时它只是向后跳，没有任何缓解，没有任何反应......

这是我的CSS代码：

.wpb_single_image .vc_single_image-wrapper {
  overflow:hidden !important;
  margin-bottom: -6px;
  -webkit-transform: scale(1);
  -webkit-transition: all 2s ease;
  transition: all 2s ease;
}

.wpb_single_image .vc_single_image-wrapper img:hover {
  overflow:hidden !important;
  transform: scale(1.1);
  -webkit-transform: scale(1.1);
  -webkit-transition: all 2s ease;
  transition: all 2s ease;
}

Answer 1

如果您希望在图像鼠标悬停和鼠标移出期间进行平滑过渡，则两个状态（未悬停和悬停）都应该应用transition设置。

在显示的代码中，img在悬停时会跟踪转换为1.1，但在悬停时，没有转换，因为图像（img）获得转换设置仅适用于hover选择器（仅当鼠标位于图像内时）。

为了产生在此link中看到的效果，还应该进行以下更改：

使包装器具有与img相同的高度和宽度（将其设置为display:inline-block）
在父级上设置overflow: hidden。这意味着图像中超出包装器原始尺寸的部分将被裁剪。

旁白：删除overflow: hidden上的img。这实际上从未被要求过，因为img不能有子标记，因此overflow实际上没有任何效果。

.wpb_single_image .vc_single_image-wrapper {
  display: inline-block;
  overflow: hidden;
  border: 2px solid black; /* Just for demo */
}
.wpb_single_image .vc_single_image-wrapper img {
  margin-bottom: -6px;
  transform: scale(1);
  transition: all 2s ease;
}
.wpb_single_image .vc_single_image-wrapper img:hover {
  transform: scale(1.1);
  /*transition: all 2s ease; no need to mention this as it is same setting as default */
}

<div class='wpb_single_image'>
  <div class='vc_single_image-wrapper'>
    <img src='http://lorempixel.com/100/100/nature/1' />
  </div>
</div>

原始答案的一部分：（现在由于评论不适用）

或者，您可以在包装器上应用这两种状态（根据您的需要），如下面的代码段所示。

在包装器上应用:hover相当于在:hover上应用img，只要包装器和img大小相同且没有空间（在包装器和img之间填充。

.wpb_single_image .vc_single_image-wrapper {
  margin-bottom: -6px;
  transform: scale(1);
  transition: all 2s ease;
  overflow: hidden !important;
  display: inline-block; /* this is required because wrapper is by default 100% width */
}
.wpb_single_image .vc_single_image-wrapper:hover {
  transform: scale(1.1);
  /*transition: all 2s ease; no need to mention this as it is same setting as default */
}

<div class='wpb_single_image'>
  <div class='vc_single_image-wrapper'>
    <img src='http://lorempixel.com/100/100/nature/1' />
  </div>
</div>

Answer 2

 .wpb_single_image .vc_single_image-wrapper img{
    overflow:hidden !important;
    margin-bottom: -6px;
    transform: scale(1);
    -webkit-transform: scale(1);
    -webkit-transition: all 2s ease;
    transition: all 2s ease;
 }

.wpb_single_image .vc_single_image-wrapper img:hover {
    overflow:hidden !important;
    transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -webkit-transition: all 2s ease;
    transition: all 2s ease;

 }

更新您的代码，如上所述..它可以正常工作：）

为什么CSS轻松不能用于鼠标？

2 个答案: