Elementor-LOGO透明悬停背景换色效果

写类名

header-transparent

写css

/* ===========================
① 默认状态：透明背景 + 白色文字 + 黑色LOGO
=========================== */
.header-transparent {
background-color: transparent;
transition: background-color 0.3s ease, color 0.3s ease;
}

/* 菜单文字白色 */
.header-transparent .elementor-nav-menu a {
color: #ffffff !important;
}

/* LOGO 白色（如果你用的是 Site Logo SVG 或带颜色，可让 它滤镜变白） */
.header-transparent img {
filter: brightness(0) invert(1); /* 让黑logo变白 */
transition: filter 0.3s ease;
}

/* ===========================
② 悬停 OR 滚动（sticky）状态
—— 白底 + 黑字 + 黑LOGO
=========================== */

/* 鼠标悬停 */
.header-transparent:hover {
background-color: #ffffff;
}

/* 滚动后 Sticky 效果 */
.header-transparent.elementor-sticky–effects {
background-color: #ffffff !important;
}

/* 悬停 + 滚动 后文字变黑 */
.header-transparent:hover .elementor-nav-menu a,
.header-transparent.elementor-sticky–effects .elementor-nav-menu a {
color: #000000 !important;
}

/* 悬停 + 滚动 后 LOGO 变黑 */
.header-transparent:hover img,
.header-transparent.elementor-sticky–effects img {
filter: none; /* 取消白色滤镜，恢复原图（黑色） */
}