如何在悬停之前触发css转换 [英] how to trigger css transition before hover

问题描述

所以，我做了边栏隐藏和显示时，当鼠标悬停。我的问题是如何在鼠标悬停在边栏上触发css转换，就像在侧边栏链接： https：// la24.org/vision 。我怎么做的？非常感谢。

So, I made sidebar hidden and shows up when on mouse hover. My question is how to trigger the css transition before the mouse hover on the sidebar, just like in this sidebar link: https://la24.org/vision . how I do that? many thanks

推荐答案

有两种方法。

1. Javascript - 只需在需要时切换展开类。


2. 纯CSS -
   < =https://i.stack.imgur.com/JKQNk.png =nofollow noreferrer> Sideabar包装和侧栏元素

1. Javascript - Just toggle expanded class whenever needed.
2. Pure CSS - Sideabar Wrapper and Sidebar element

在这种情况下，您可以在.sidebar-wrapper hover上触发.sidebar动画：

In this case you can trigger your .sidebar animation on .sidebar-wrapper hover:

.sidebar-wrapper:hover > .sidebar{
   **Your hover state** (e.g. width: 300px)
}

这篇关于如何在悬停之前触发css转换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！