Javascript 当鼠标悬停在每个字母上时，如何更改字体系列+背景

将鼠标悬停在给定文本的每个字母上将更改文本的整个字体+正文背景色。我试过了，但都失败了。相反，字体只会在被悬停的字母之后更改，我甚至不知道如何从div选择器中影响主体背景颜色

.英雄姓名组{ 字体系列：“Train One”，草书； 显示：内联； 位置：相对位置； 字体大小：10vmin； } .hero name div:类型的第一个：hover， .hero name div:类型的第一个：hover~div{ 颜色：ffffff； 文本阴影：0.1vmin 0 dba1a1、0.2vmin 0 d89999、0.3vmin 0 d59292、0.4vmin 0 d28a8a、0.5vmin 0 cf8383、0.6vmin 0 cd7c7c、0.7vmin 0 ca7474、0.8vmin 0 c76d6d、0.5vmin rgb230 139/5%、0-0.1vmin 0.3vmin rgb230 139/20%、0.9vmin rgb230/30%、0.9vmin rgb230/30%、0.5vmin rgb230/1.5vmin 139 139 / 30%; } .英雄姓名div:nth-child2:hover， .英雄姓名div:n-child2:hover~div{ 字体系列：“安东”，无衬线； 颜色：d9d9d9； 文本阴影：-1px-1px 1px rgba255、255、255、.1、1px 1px 1px rgba0、0、0、5； } .英雄姓名div:nth-child3:hover， .英雄姓名div:n-child3:hover~div{ 字体系列：“安东”，无衬线； 颜色：bc2e1e； 背景色：edde9c； 文本阴影：0 1px 0px 378ab4，1px 0 0px 5dabcd，1px 2px 1px 378ab4，2px 1px 5dabcd，2px 3px 2px 378ab4，3px 2px 5dabcd，3px 4px 2px 378ab4，4px 5px 3px 378ab4，5px 5dabcd，5px 6px 2px 378ab4，6px 7px 1px 378ab4，7px 7px 7px 7px 7px 378ab4； } .英雄姓名div:nth-child4:hover， .英雄姓名div:n-child4:hover~div{ 字体系列：“安东”，无衬线； 颜色：E02； 背景：3a50d9； 字体：斜体加粗格鲁吉亚，衬线； 文本阴影：-4px3px03a50d9，-14px7px0a0e27； } Y O U R N A. M E 标题在这里

---

正如我在评论中提到的，用纯css选择以前的兄弟姐妹或父母是不可能的

有多种方法可以做到这一点。在本例中，我们将不同的文本样式定义为类，并将它们存储在专用字母标记的数据集中。 然后，在本例中，我们在字母中添加了一个悬停侦听器，这有点草率，因为我们也使用了“hero pro”元素，这是不必要的

稍后当hover事件触发时，我们从目标字母数据集中检索该类并将其应用于根元素

我对你的代码做了一点修改，假设我正确理解了你的意思，你想要这样的东西

const banner=document.getElementById'banner'； const divs=[].slice.callbanner.children[0]。children； 让currentClass='init'； const addClass=事件=>{ 设el=event.target； banner.classList？.removecurrentClass； currentClass=el.dataset.class； banner.classList.addcurrentClass； } divs.forEachdiv=>document.addEventListener'mouseover'，addClass； .英雄姓名组{ 字体系列：“Train One”，草书； 显示：内联； 位置：相对位置； 字体大小：10vmin； } .class1.英雄姓名组{ 颜色：ffffff； 文本阴影：0.1vmin 0 dba1a1、0.2vmin 0 d89999、0.3vmin 0 d59292、0.4vmin 0 d28a8a、0.5vmin 0 cf8383、0.6vmin 0 cd7c7c、0.7vmin 0 ca7474、0.8vmin 0 c76d6d、0.5vmin rgb230 139/5%、0-0.1vmin 0.3vmin rgb230 139/20%、0.9vmin rgb230/30%、0.9vmin rgb230/30%、0.5vmin rgb230/1.5vmin 139 139 / 30%; } .class2.英雄姓名组{ 字体系列：“安东”，无衬线； 颜色：d9d9d9； 文本阴影：-1px-1px 1px rgba255、255、255、.1、1px 1px 1px rgba0、0、0、5； } .class3.英雄姓名组{ 字体系列：“安东”，无衬线； 颜色：bc2e1e； 背景色：edde9c； 文本阴影：0 1px 0px 378ab4，1px 0 0px 5dabcd，1px 2px 1px 378ab4，2px 1px 5dabcd，2px 3px 2px 378ab4，3px 2px 5dabcd，3px 4px 2px 378ab4，4px 5px 3px 378ab4，5px 5dabcd，5px 6px 2px 378ab4，6px 7px 1px 378ab4，7px 7px 7px 7px 7px 378ab4； } .class4.英雄姓名组{ 字体系列：“安东”，无衬线； 颜色：E02； 背景：3a50d9； 字体：斜体加粗格鲁吉亚，衬线； 文本阴影：-4px3px03a50d9，-14px7px0a0e27； } Y O U R N A. M E 标题在这里

---

悬停时前4个字母或全部需要更改？@SimoneRossaini将鼠标悬停在某个字母上时，整个字体需要更改确定您的姓名的“a”与“Y”相同吗？@SimoneRossaini如果我理解正确，是的，当鼠标悬停在“A”上时，整个字体和主体背景都应该改变，就像鼠标悬停在“Y”上时一样。你不能用纯css选择以前的兄弟姐妹或父母。我很抱歉，我该如何遵循此解决方案，包括将背景色更改为特定颜色？只需将“背景色”属性添加到 t风格的课程，就像你在第三课堂上做的那样。或者这不是你的意思？