仅在悬停时过渡

问题描述：

我有这个:

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

.hello:hover {
    opacity:1;
}

我希望过渡效果仅在用户悬停时可视化，而不在用户悬停时可视化.

I want the transition effect to only visualise when user hover-in, not when they hover-out.

有可能吗?

答

在这种情况下，请将过渡添加到 hover .

In this case add the transition to hover.

为什么?

因为当您将鼠标悬停时，您将添加过渡并更改不透明度，因此将设置过渡属性，因此它将起作用.当鼠标离开元素时，您会突然删除过渡，因此不再指定过渡，因此也就不再过渡.

Because when you hover you will add the transition and change the opacity so the transition property is set and thus it will work. When your mouse leave the element you suddenly remove the transition so it is no more specified and thus no more transition.

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

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

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

相关推荐