Originally written for mbnuqw/sidebery, a sidebar tab list extension. Requires a custom userChrome.css to be set up.

The following css will collapse and expand the sidebar when the mouse is hovered (or not):

/*transition_sidebar.css*/

#sidebar {
  transition: width 128ms ease !important;
  transition-delay: 128ms !important;
  width: 40px !important;
  border-right: 1px solid #000;

}

#sidebar-box {
	width: 40px !important;
	max-width: none !important;
	min-width: 0px !important;
	transition: width 128ms ease !important;
	transition-delay: 128ms !important;
}

#sidebar-box:hover {
	width: 540px !important;
	transition: width 128ms ease !important;
}

#sidebar-box:hover > #sidebar {
  width: 540px !important;
  transition-delay: 0ms !important
}