Css 尝试在标题中的两个不同单词上执行悬停效果

我是新来的，所以请对我放松点，因为我正在学习。基本上，我有一个标题，其中包含一些文本，如下所示：

<section id="hero">
<header><span id="first">Dwayne <> </span><span id="last">Rill Jr.</span></header>
<hr>
<p>Aspiring Designer & Developer</p>
<button id="cta-works">Take a look at my work</button>
</section>

---

我尝试使用两个独立的跨距来让它工作，但它只会在我滚动到“第一个”而不是“第二个”时改变颜色。我想让它在你翻过头部两侧时翻转颜色。任何帮助都将不胜感激

您可以将悬停添加到

标题

：

英雄{ 显示器：flex； 弯曲方向：立柱； 证明内容：中心； 对齐项目：居中； 高度：90vh； 背景色：#0b0c10； 颜色：白色； 文本转换：大写； 字号：200； 游标：默认值； } #首先{ 颜色：#66fcf1； } 标题：先悬停#{ 颜色：白色； } #最后{ 颜色：白色； } 标题：悬停#最后{ 颜色：#66fcf1； }

小德韦恩·瑞尔。

有抱负的设计师和开发人员

看看我的作品

问题在于悬停效果在单个文本元素上。如果将悬停效果放在标题上，则每当用户将鼠标悬停在标题中的任何内容上时，文本颜色都会发生变化

例如：

标题：先悬停#{
颜色：白色；
}

在本例中，标题获取悬停选择器，然后id为“first”的元素（如果在标题内）发生颜色更改

完整示例：

英雄{ 显示器：flex； 弯曲方向：立柱； 证明内容：中心； 对齐项目：居中； 高度：90vh； 背景色：#0b0c10； 颜色：白色； 文本转换：大写； 字号：200； 游标：默认值； } #首先{ 颜色：#66fcf1； } #最后{ 颜色：白色； } 标题：先悬停#{ 颜色：白色； } 标题：悬停#最后{ 颜色：#66fcf1； }

---

如果要使用Javascript执行此操作-

<script>
  document.getElementById("first").addEventListener("mouseover", function mouseOver() {
    document.getElementById("first").style.color = "teal";
    document.getElementById("last").style.color = "white";
  });
  document.getElementById("last").addEventListener("mouseover", function mouseOver() {
    document.getElementById("last").style.color = "teal";
    document.getElementById("first").style.color = "white";
  });
  document.getElementById("first").addEventListener("mouseout", function mouseOut() {
    document.getElementById("first").style.color = "white";
    document.getElementById("last").style.color = "teal";
  });
  document.getElementById("last").addEventListener("mouseout", function mouseOut() {
    document.getElementById("last").style.color = "white";
    document.getElementById("first").style.color = "teal";
  });
</script>

document.getElementById（“first”）.addEventListener（“mouseover”，函数mouseover（）{
document.getElementById（“第一”）.style.color=“teal”；
document.getElementById（“last”）.style.color=“白色”；
});
document.getElementById（“last”）.addEventListener（“mouseover”，函数mouseover（）{
document.getElementById（“last”）.style.color=“teal”；
document.getElementById（“第一”）.style.color=“白色”；
});
document.getElementById（“first”）.addEventListener（“mouseout”，函数mouseout（））{
document.getElementById（“第一”）.style.color=“白色”；
document.getElementById（“last”）.style.color=“teal”；
});
document.getElementById（“last”）.addEventListener（“mouseout”，函数mouseout（））{
document.getElementById（“last”）.style.color=“白色”；
document.getElementById（“第一”）.style.color=“teal”；
});

片段-

文件
#英雄{
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
对齐项目：居中；
高度：90vh；
背景色：#0b0c10；
颜色：白色；
文本转换：大写；
字号：200；
游标：默认值；
}
#首先{
颜色：#66fcf1；
}
#第一：悬停{
颜色：白色；
}
#最后{
颜色：白色；
}
#最后：悬停{
颜色：#66fcf1；
}
德韦恩和伊萨库&rsaquo；小河。

有抱负的设计师和开发人员

看看我的作品
document.getElementById（“first”）.addEventListener（“mouseover”，函数mouseover（）{
document.getElementById（“第一”）.style.color=“teal”；
document.getElementById（“last”）.style.color=“白色”；
});
document.getElementById（“last”）.addEventListener（“mouseover”，函数mouseover（）{
document.getElementById（“last”）.style.color=“teal”；
document.getElementById（“第一”）.style.color=“白色”；
});
document.getElementById（“first”）.addEventListener（“mouseout”，函数mouseout（））{
document.getElementById（“第一”）.style.color=“白色”；
document.getElementById（“last”）.style.color=“teal”；
});
document.getElementById（“last”）.addEventListener（“mouseout”，函数mouseout（））{
document.getElementById（“last”）.style.color=“白色”；
document.getElementById（“第一”）.style.color=“teal”；
});

Ahhh！我以为会是这样（在同一个属性上使用header和span标记），只是不太知道怎么做。非常感谢你的回答！

<script>
  document.getElementById("first").addEventListener("mouseover", function mouseOver() {
    document.getElementById("first").style.color = "teal";
    document.getElementById("last").style.color = "white";
  });
  document.getElementById("last").addEventListener("mouseover", function mouseOver() {
    document.getElementById("last").style.color = "teal";
    document.getElementById("first").style.color = "white";
  });
  document.getElementById("first").addEventListener("mouseout", function mouseOut() {
    document.getElementById("first").style.color = "white";
    document.getElementById("last").style.color = "teal";
  });
  document.getElementById("last").addEventListener("mouseout", function mouseOut() {
    document.getElementById("last").style.color = "white";
    document.getElementById("first").style.color = "teal";
  });
</script>