悬停后保持效果持续的最简单方法是什么答案

【问题标题】：What is the simplest way to keep an effect ongoing after hover悬停后保持效果持续的最简单方法是什么
【发布时间】：2017-06-15 05:51:53
【问题描述】：

我有一个在背景上非常褪色的 h1 文本。一旦你将它翻过来/悬停在它所在的方块上，它就会慢慢开始亮起，直到它完全变白。这很棒，就像我想要的那样。这就是问题所在。一旦你离开悬停，颜色就会变淡。我希望它保持白色，因为让它褪色的全部意义在于它不应该出现在你的视线中，直到你盘旋经过它。

TL:DR / 当我悬停 h1 时它开始亮起，我希望在您移除悬停后保持新颜色。

我使用的 HTML

<h1 style="color: #fff;">Sammen flytter vi<br> de digitale grænser.</h1>

我使用的 CSS

.lovernemarketingtitle h1 { 
    font-size: 50px;
    line-height: 54px;
    font-weight: 900;
    opacity: 0.5;
}


.lovernemarketingtitle:hover h1 {
    opacity: 1;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-out;
    -ms-transition: all 1s ease-out;
    transition: all 1s ease-out;
}

PRAVEEN KUMAR 的解决方案

http://jsbin.com/dufarofoto/1/edit?html,css,output

【问题讨论】：

标签： css hover

【解决方案1】：

使用transition-delay，但要注意，不当使用也会影响悬停状态。

a {text-decoration: none; display: inline-block; padding: 5px; border: 1px solid #ccc; border-radius: 3px; line-height: 1; color: #000; transition: all 0.5s linear 2s;}
a:hover {transition: all 0.5s linear 0s; background: #ccf;}

<a href="#">Hover Me</a><br />
Lights up immediately but goes back after 2 seconds.

ps：没有opacity: 2。

【讨论】：

非常感谢您的回答！现在修复了不透明度部分。我在原始帖子中添加了我使用的 html，也许这会有所帮助。我尝试编辑您的代码，但无法使其正常工作（当然是我的错）。我试图让它在 h1 而不是文本按钮上工作，抱歉没有更具体。悬停前 = 0.5 不透明度悬停后 = 我希望它缓慢地变为 1 不透明度（在 1 秒内），如果有人移除悬停，它只会保持在那里，它不会再次消失。
@eMikkelsen 很好，还有什么需要修复的吗？你想要像我这样的例子吗？
@eMikkelsen 需要 2 秒，伙计。
您好，是的，我现在编辑了评论，很抱歉造成混乱。此外，我使用的 html/css 一切正常，除了在停止悬停后保持颜色 :)
@eMikkelsen 查看更新的：jsbin.com/dufarofoto/1/edit?html,css,output 您想通过点击勾选按钮来接受我的回答吗？