Blocksy透明页眉如何实现鼠标悬停变白底

Blocksy 主题的透明页眉在 HTML 结构中是通过 [data-transparent-row="yes"] 或外层的 [data-transparent] 来定义的。你之前的代码没生效，是因为 Blocksy 的 header 内部还有多个容器（如 ct-sticky-container 和 data-row），它们可能自带了背景色或者层级更高。

请删除之前的 CSS，尝试使用下面这段专门针对你代码结构优化的代码：

修改后的 CSS 代码

CSS

/* 1. 初始状态：确保页眉背景完全透明 */
.ct-header [data-transparent-row="yes"] {
    background-color: transparent !important;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* 2. 鼠标悬停状态：背景变白，文字变黑 */
.ct-header:hover [data-transparent-row="yes"] {
    background-color: #ffffff !important; /* 悬浮变白 */
    box-shadow: 0 2px 15px rgba(0,0,0,0.1); /* 增加轻微阴影 */
}

/* 3. 悬停时：强制菜单文字和 Logo 文字变色（防止白底白字看不起） */
.ct-header:hover .ct-menu-link,
.ct-header:hover .site-title,
.ct-header:hover .ct-icon {
    color: #333333 !important;
    fill: #333333 !important;
}

/* 4. 处理 Logo：如果你的 Logo 是白色的，悬浮变白后会看不见 */
/* 如果需要悬浮时微调 Logo 透明度或滤镜，可以启用下面这段 */
.ct-header:hover .site-logo-container img {
    filter: brightness(0.2); /* 将白色 Logo 变为接近黑色，如果是彩色 Logo 则不需要这行 */
}

为什么之前的可能没生效？

选择器层级不够：Blocksy 使用了大量的 data- 属性（如 data-row="middle"），普通类名选择器有时会被主题默认的属性选择器覆盖。
容器嵌套：从你的代码看，data-transparent-row="yes" 是真正承载背景颜色的那一层，所以我们必须直接定位到这一层。
Sticky 容器干扰：你的代码中包含了 ct-sticky-container，这说明你开启了粘性页眉。上面的代码通过 .ct-header:hover 监听整个头部区域，确保只要鼠标进入页眉范围，背景就会变色。