将文本渐变背景改为白色后hover交互效果失效问题求助

我想把文本渐变效果中的黑色替换为白色，但修改后hover交互效果失效了，以下是我的代码：

HTML代码 #

<div class="container">
  <h1 class="hover">
    Hi,
    <div>I'm Opal.</div>
    <div class="job">Fullstack Developer / Frontend / Backend</div>
  </h1>
</div>

CSS代码 #

.hover {
  color: #0000;
  background:
  linear-gradient(90deg,#1095c1 50%,#000 0)
  var(--_p,100%)/200% no-repeat;
  -webkit-background-clip: text;
          background-clip: text;
  transition: 5s;
}

.hover:hover {
  --_p: 0%;
}

body {
  height: 100vh;
  margin: 0;
  display: grid;
  place-content: center;
}

h1 {
  font-family: system-ui, sans-serif;
  font-size: 3rem;
  margin:0;
  cursor: pointer;
  padding: 0 .1em;
}

解决方法 #

问题核心是背景色与渐变颜色无对比度：

• 把渐变中的黑色#000换成白色#fff后，body默认是白色背景，hover时文本显示的白色和背景融为一体，自然看不到交互变化。
• 修正步骤：
  1. 将.hover里的渐变黑色替换为白色：linear-gradient(90deg,#1095c1 50%,#fff 0)
  2. 给body添加深色背景，比如background: #111;，让白色文本能清晰显示。

修改后的完整CSS代码：

.hover {
  color: #0000;
  background:
  linear-gradient(90deg,#1095c1 50%,#fff 0)
  var(--_p,100%)/200% no-repeat;
  -webkit-background-clip: text;
          background-clip: text;
  transition: 5s;
}

.hover:hover {
  --_p: 0%;
}

body {
  height: 100vh;
  margin: 0;
  display: grid;
  place-content: center;
  background: #111; /* 添加深色背景 */
}

h1 {
  font-family: system-ui, sans-serif;
  font-size: 3rem;
  margin:0;
  cursor: pointer;
  padding: 0 .1em;
}

如果想保留浅色背景，只需把渐变的白色换成和浅色背景有对比的颜色（比如深灰色#333），同样能让hover效果正常生效。

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