CustomCSSforFx项目中书签侧边栏悬停显示问题的解决方案

在Firefox浏览器定制项目CustomCSSforFx的最新版本4.7.0中，用户报告了一个关于书签侧边栏悬停显示功能失效的问题。本文将深入分析该问题的原因，并提供有效的解决方案。

问题背景

当用户在Firefox 136.0版本上使用CustomCSSforFx 4.7.0时，启用书签侧边栏的悬停显示功能后，会出现一个空白面板而非预期的书签内容。这个问题在Windows 10系统上被确认存在。

根本原因

经过技术分析，发现这是由于Mozilla引入了全新的侧边栏架构所致。旧版本的CSS代码无法兼容新版的Firefox侧边栏实现机制，导致悬停功能失效。

技术解决方案

针对这个问题，开发者提供了一个有效的CSS修复方案。该方案通过以下技术手段实现：

1. 定义了两个CSS变量控制侧边栏宽度：

   • --sidebar-hover-width：设置悬停触发区域的宽度
   • --sidebar-visible-width：设置侧边栏完全展开时的宽度

2. 关键CSS实现逻辑：

   • 默认隐藏主侧边栏内容
   • 设置极小的初始宽度(最小3px)作为悬停触发区域
   • 悬停时展开到完整宽度并显示内容
   • 通过透明度变化实现平滑的显示/隐藏效果

完整修复代码

以下是完整的CSS修复代码，用户可以将其添加到userChrome.css文件中：

:root{
  --sidebar-hover-width: 8px;
  --sidebar-visible-width: 300px;
}

#sidebar-main{
  display: none !important;
}

#sidebar-box,
#sidebar-box #sidebar {
  padding: 0 !important;
  margin: 0 !important;
  opacity: 0 !important;
}

#sidebar-box:hover,
#sidebar-box:hover #sidebar {
  opacity: 1.0 !important;
}

#sidebar-box {
  min-width: var(--sidebar-hover-width) !important;
  width: var(--sidebar-hover-width) !important;
  max-width: var(--sidebar-hover-width) !important;
}

#sidebar-box:hover {
  min-width: var(--sidebar-visible-width) !important;
  width: var(--sidebar-visible-width) !important;
  max-width: var(--sidebar-visible-width) !important;
}

使用建议

1. 可以根据个人喜好调整--sidebar-hover-width和--sidebar-visible-width的值
2. 最小悬停宽度不应小于3px，否则可能影响功能正常使用
3. 该解决方案已被纳入CustomCSSforFx项目的最新版本中

这个解决方案通过巧妙的CSS技巧，在Firefox新版架构下重新实现了书签侧边栏的悬停显示功能，为用户提供了流畅的使用体验。