如何移除父元素mix-blend-mode，保留子元素hover颜色效果？

问题根源 #

当你给整个<header>设置mix-blend-mode: difference时，整个头部（包括所有子元素）会和下方的页面背景进行颜色混合。这就导致你给导航链接设置的hover绿色，会先和父元素的混合规则作用，最终变成紫色。直接给子元素加mix-blend-mode: normal或isolation: isolate无效，因为父元素的混合是作用于整个头部区域和页面背景的，子元素无法单独脱离这个全局混合。

可行解决方案 #

不要给整个<header>设置混合模式，而是将mix-blend-mode: difference只应用在非hover状态的导航链接、LOGO和头部边框上，hover状态的链接直接使用你想要的绿色，不参与混合：

示例CSS代码

/* 基础头部样式，移除全局mix-blend-mode */
.nav-header {
  position: fixed;
  width: 100%;
  padding: 1rem 2rem;
  /* 这里不再设置mix-blend-mode */
}

/* 给非hover状态的LOGO和导航链接添加混合模式 */
.nav-header .logo,
.navbar a:not(:hover) {
  color: #fff;
  mix-blend-mode: difference;
  text-decoration: none;
}

/* 用伪元素实现头部底部边框，并添加混合模式 */
.nav-header::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #fff;
  mix-blend-mode: difference;
}

/* hover状态直接设置绿色，不参与混合 */
.navbar a:hover {
  color: #2ecc71; /* 你想要的绿色 */
}

为什么这个方法有效

• 只有未hover的元素和边框会与页面背景进行difference混合，实现随背景变色的效果；
• hover状态的链接跳过混合模式，直接显示你设置的绿色，不会被父元素的混合规则干扰；
• 头部的整体交互逻辑保持不变，同时解决了颜色异常的问题。

备选方案（如果需要保留头部全局混合） #

如果你必须给整个<header>设置mix-blend-mode: difference，可以通过给hover的链接添加独立的背景色并配合isolation: isolate来隔离混合：

.nav-header {
  position: fixed;
  width: 100%;
  padding: 1rem 2rem;
  mix-blend-mode: difference;
}

.navbar a {
  color: #fff;
  text-decoration: none;
}

.navbar a:hover {
  color: #2ecc71;
  isolation: isolate;
  position: relative;
  /* 添加与页面当前背景匹配的背景色，避免混合影响 */
  background-color: #fff; /* 假设当前hover区域背景是浅色，根据实际情况调整 */
  padding: 0.2rem 0.5rem; /* 给背景色留出空间 */
}

这个方案需要你根据hover时链接所在区域的背景色调整background-color，确保链接的绿色不会被混合改变，适合背景颜色固定的场景。

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