how to trigger css transition before hover

问题

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:

There are two ways doing it.

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

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

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

来源：https://stackoverflow.com/questions/42130500/how-to-trigger-css-transition-before-hover