CSS分享:悬浮顶部栏,pdf工具栏,pdf侧栏的css.自动隐藏,通过鼠标悬浮显示

[meta]

鼠标指向大概上面中间的位置可以呼出顶部栏,旁边的位置呼出pdf工具栏

/*=====顶部容器=====*/
.workspace-tab-header-container{
  position:absolute;
  display: flex;
  width: 100%;                  
  height: 33px; 
  left: 0;
  transform: translateY(calc(-105%));
   transition: transform 0.3s ease, opacity 0.3s ease;
  transition-delay: 0.6s;
  opacity: 0;
  z-index: 20;
  overflow: visible !important;
}
/* 底部悬停触发条 */
.workspace-tab-header-container::after {
  content: "";  
  position: absolute;
  display: block; 
  bottom: -8px;   
  left: 40%;      
  width: 20%;     
  height: 16px;   
  background: var(--divider-color);
  border-radius: 0 0 8px 8px; 
  opacity: 0;
  cursor: pointer;
  z-index: 21;
}
.workspace-tab-header-container-inner::after {
  content: "";  
  position: absolute;
  display: block; 
  bottom: -8px;  
  left: 40%;      
  width: 20%;     
  height: 16px; 
  background: var(--divider-color);
  border-radius: 0 0 8px 8px; 
  opacity: 0;
  cursor: pointer;
  z-index: 21;
}
/* 悬停时展开 */
.workspace-tab-header-container:hover,
.workspace-tab-header-container:focus-within
{
  transform: translateY(0);
  opacity: 0.80;
  transition-delay: 0.2s; 
}
/* =====pdf工具栏悬浮窗===== */
.pdf-toolbar {
  position:absolute;
  display: flex;
  width: 100%;                  
  height: 33px; 
  left: 0;
  transform: translateY(calc(-85%));
  transition-delay: 0.6s;
  opacity: 0;
  z-index: 20;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.pdf-toolbar:hover,
.pdf-toolbar:focus-within
{
  opacity: 0.80;
  transform: translateY(0);
  transition-delay: 0.2s;
}
/* =====pdf侧栏悬浮窗===== */
/* 目录容器悬浮,需要手动设置宽度 */
.pdf-sidebar-container {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width:255px;
  z-index: 10;
  opacity: 0.80;
  background: var(--background-primary);
  transform: translateX(calc(-100%));
  transition: transform 0.3s ease;
}
body:has(.pdf-content-container.sidebarOpen) .pdf-sidebar-container{
  transform: translateX(0);
  transition-delay: 0s;
}
/* 禁用sidebar-widt,避免影响悬浮效果 */
.pdf-content-container {
  width: 100% !important;
  margin-left: 0 !important;
  --sidebar-width:0  !important;
}
.menu{
  opacity: 0.80;
}

[meta]