Quarto网站侧边栏实现hover显示效果的问题求助

问题分析 #

你当前的CSS无法生效的核心原因有两个：

1. .parent-element是自定义的无效选择器，Quarto生成的页面中不存在这个类名的元素；
2. 直接隐藏#quarto-sidebar a后，侧边栏失去了可触发hover的交互区域，导致hover事件无法被捕获。

解决方案 #

修改你的styles.css代码，针对Quarto侧边栏的实际DOM结构编写逻辑，确保hover触发区域存在且选择器正确：

/* 默认状态：隐藏侧边栏，仅保留最小占位避免页面布局跳动 */
#quarto-sidebar {
  width: 0;
  overflow: hidden;
  transition: width 0.3s ease; /* 可选：添加平滑过渡动画 */
}

/* 鼠标悬停侧边栏容器时，展开侧边栏宽度 */
#quarto-sidebar:hover {
  width: 260px; /* 根据需求调整侧边栏宽度 */
}

/* 确保悬停时侧边栏内的链接正常显示 */
#quarto-sidebar:hover a {
  display: block;
}

可选优化 #

如果希望侧边栏平时完全隐藏，仅在鼠标靠近页面左侧边缘时触发显示，可以调整为以下逻辑：

/* 默认隐藏侧边栏 */
#quarto-sidebar {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  overflow: hidden;
  transition: width 0.3s ease;
  z-index: 100;
}

/* 鼠标悬停页面左侧边缘区域时展开侧边栏 */
body:hover #quarto-sidebar {
  width: 260px;
}

#quarto-sidebar:hover {
  width: 260px;
}

#quarto-sidebar:hover a {
  display: block;
}

内容的提问来源于stack exchange，提问作者R Walser