如何维护鼠标悬停状态？

问题描述：

我想要一条线变成一个长方形的过渡。我想做到这一点，以便当过渡完成时，即使鼠标没有在其上徘徊，最终状态仍保持原位。如何维护鼠标悬停状态？

这是我当前的代码：

#line { 
 
    width: 300px; 
 
    height: 1px; 
 
    background-color: darkblue; 
 
    transition: height 2s; 
 
    -webkit-transition: height 2s; 
 
} 
 

 
#line:hover { 
 
    width: 300px; 
 
    height: 200px; 
 
    background-color: darkblue; 
 
}

<div id="line"></div>

这绝对是一个重复问题，但是当我找到一个好的目标时，答案是'animation-fill-mode：forwards';' – TylerH

@TylerH这是一个动画。它是否也适用于转换？ – GolezTrol

@GolezTrol我认为它确实，但我不知道'：hover'。无论如何，看起来OP实际上并没有在这里处理动画;我将编辑该问题。 – TylerH

答

我认为最好的办法是增加一个小的脚本，将一个类。该类仍然unhovering后：

window.addEventListener('DOMContentLoaded', function() { 
 
    document.getElementById('line').addEventListener('mouseover', function(event) { 
 
    document.getElementById('line').classList.add('activated'); 
 
    }); 
 
});

#line { 
 
    width: 300px; 
 
    height: 1px; 
 
    background-color: darkblue; 
 
    transition: height 2s; 
 
    -webkit-transition: height 2s; 
 
} 
 
#line.activated{ 
 
    width: 300px; 
 
    height: 200px; 
 
    background-color: darkblue; 
 
}

<body> 
 

 
    <div id="line"></div> 
 

 
</body>

嘿，这似乎是我正在寻找的解决方案。谢谢 –

相同的代码，但使用'click'而不是'mouseover'事件。 – GolezTrol

啊多谢老兄 –

答

一个取巧的办法与CSS只得到这样的效果：在元素上的过渡，延迟设置为一个巨大的价值。并在悬停状态下将其设置为0

当您悬停时，元素更改为悬停状态，这种方式即可立即进行转换。

当您取消悬停，会有一个9999s延迟开始前（当然，不是永远真的，但没有人会注意到）

#line { 
 
    width: 300px; 
 
    height: 10px; 
 
    background-color: darkblue; 
 
    -webkit-transition: height 1s 9999s; 
 
    transition: height 1s 9999s; 
 
} 
 
#line:hover{ 
 
    width: 300px; 
 
    height: 200px; 
 
    background-color: darkblue; 
 
    -webkit-transition-delay: 0s; 
 
    transition-delay: 0s; 
 
}

<body> 
 
    <div id="line"></div> 
 
</body>

如何维护鼠标悬停状态？

相关推荐