Question

我遇到的问题是当我设置：

时

.banner-division2 h2:hover {
    -webkit-transition: 0.6 ease;
    transition: 1s ease;
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
    color: #00C8BD;
}

它只会转换为悬停的第一部分。换句话说，一旦鼠标退出“悬停”区域，它将自动返回到它的原始形式 - 但是，我希望它能够轻松地转换回它的原始形式（它没有这样做）。

非常感谢。

Answer 1

您已为transition州定义了:hover 。当不在:hover中时，没有定义transition - 而且，并且没有一个确实发生。所以拆分你的规则：

.banner-division2 h2 {
    -webkit-transition: all 1s ease;
    transition: all 1s ease;
}
.banner-division2 h2:hover {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
    color: #00C8BD;
}

这样，转换定位的是h2，而不仅仅是h2:hover。

Answer 2

您需要将transition属性放在您想要效果的元素上，而不是放在:hover上。

喜欢这个

h2 {
  color: blue;
  transition: 1s ease;
}

h2:hover {
  color: red;
}

如果这不起作用，请尝试在all属性

上添加值transition

过渡不是双向的

2 个答案: