仅在悬停时转换

Question

我有这个：

.hello {
    opacity:0;
    transition: all 220ms ease 0s;
}

.hello:hover {
    opacity:1;
}

我希望转换效果仅在用户悬停在时可视化，而不是在它们悬停时。

这可能吗？

Answer 1

在这种情况下，请将转换添加到hover。

<强>为什么吗

因为当您悬停时，您将添加过渡并更改不透明度，以便设置过渡属性，因此它将起作用。当您的鼠标离开元素时，您会突然删除转换，因此不再指定它，因此不再进行转换。

＆＃13;

＆＃13;

.hello {
  opacity: 0;
  font-size:35px;
}

.hello:hover {
  opacity: 1;
  transition: all 1s ease 0s;
}

＆＃13;

<div class="hello">
  Hello
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

只需将悬停css选择器下的转换css（转换：所有220ms缓动0;）放置。