悬停在每个字母上时如何更改字体系列+背景

Question

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

 .hero-name div { font-family: 'Train One', cursive; display: inline; position: relative; font-size: 10vmin; }.hero-name div:first-of-type:hover, .hero-name div:first-of-type:hover~div { color: #ffffff; text-shadow: 0 0.1vmin 0 #dba1a1, 0 0.2vmin 0 #d89999, 0 0.3vmin 0 #d59292, 0 0.4vmin 0 #d28a8a, 0 0.5vmin 0 #cf8383, 0 0.6vmin 0 #cd7c7c, 0 0.7vmin 0 #ca7474, 0 0.8vmin 0 #c76d6d, 0 0 0.5vmin rgb(230 139 139 / 5%), 0 -0.1vmin 0.3vmin rgb(230 139 139 / 20%), 0 0.9vmin 9vmin rgb(230 139 139 / 30%), 0 1.2vmin 1.2vmin rgb(230 139 139 / 30%), 0 1.5vmin 1.5vmin rgb(230 139 139 / 30%); }.hero-name div:nth-child(2):hover, .hero-name div:nth-child(2):hover~div { font-family: 'Anton', sans-serif; color: #d9d9d9; text-shadow: -1px -1px 1px rgba(255, 255, 255, .1), 1px 1px 1px rgba(0, 0, 0, .5); }.hero-name div:nth-child(3):hover, .hero-name div:nth-child(3):hover~div { font-family: 'Anton', sans-serif; color: #bc2e1e; background-color: #edde9c; text-shadow: 0 1px 0px #378ab4, 1px 0 0px #5dabcd, 1px 2px 1px #378ab4, 2px 1px 1px #5dabcd, 2px 3px 2px #378ab4, 3px 2px 2px #5dabcd, 3px 4px 2px #378ab4, 4px 3px 3px #5dabcd, 4px 5px 3px #378ab4, 5px 4px 2px #5dabcd, 5px 6px 2px #378ab4, 6px 5px 2px #5dabcd, 6px 7px 1px #378ab4, 7px 6px 1px #5dabcd, 7px 8px 0px #378ab4, 8px 7px 0px #5dabcd; }.hero-name div:nth-child(4):hover, .hero-name div:nth-child(4):hover~div { font-family: 'Anton', sans-serif; color: #e0eff2; background: #3a50d9; font: italic bold Georgia, Serif; text-shadow: -4px 3px 0 #3a50d9, -14px 7px 0 #0a0e27; }

 <section id="banner"> <div class="hero-name"> <div>Y</div> <div>O</div> <div>U</div> <div>R</div> <div></div> <div>N</div> <div>A</div> <div>M</div> <div>E</div> <div class="hero-pro"> <h2>Title Here</h2> </div> </div> </section>

有什么解决办法吗？ 欢迎 JavaScript。

Answer 1

就像我在评论中提到的那样，不可能 select 以前的兄弟姐妹或父母纯 css ..

go 关于这个有多种方法。 在这个例子中，我们将不同的文本 styles 定义为类，并将它们存储在专用字母标记的数据集中。 然后我们为字母添加一个 hover 监听器（在这个例子中有点草率，因为我们也使用了 'hero-pro' 元素，这是不必要的）。

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

我稍微修改了你的代码，假设我理解正确你是在追求这样的东西吗？

 const banner = document.getElementById('banner'); const divs = [].slice.call(banner.children[0].children); let currentClass = 'init'; const addClass = event => { let el = event.target; banner.classList?.remove(currentClass); currentClass = el.dataset.class; banner.classList.add(currentClass); } divs.forEach(div => document.addEventListener('mouseover', addClass));

 .hero-name div { font-family: 'Train One', cursive; display: inline; position: relative; font-size: 10vmin; }.class1.hero-name div { color: #ffffff; text-shadow: 0 0.1vmin 0 #dba1a1, 0 0.2vmin 0 #d89999, 0 0.3vmin 0 #d59292, 0 0.4vmin 0 #d28a8a, 0 0.5vmin 0 #cf8383, 0 0.6vmin 0 #cd7c7c, 0 0.7vmin 0 #ca7474, 0 0.8vmin 0 #c76d6d, 0 0 0.5vmin rgb(230 139 139 / 5%), 0 -0.1vmin 0.3vmin rgb(230 139 139 / 20%), 0 0.9vmin 9vmin rgb(230 139 139 / 30%), 0 1.2vmin 1.2vmin rgb(230 139 139 / 30%), 0 1.5vmin 1.5vmin rgb(230 139 139 / 30%); }.class2.hero-name div { font-family: 'Anton', sans-serif; color: #d9d9d9; text-shadow: -1px -1px 1px rgba(255, 255, 255, .1), 1px 1px 1px rgba(0, 0, 0, .5); }.class3.hero-name div { font-family: 'Anton', sans-serif; color: #bc2e1e; background-color: #edde9c; text-shadow: 0 1px 0px #378ab4, 1px 0 0px #5dabcd, 1px 2px 1px #378ab4, 2px 1px 1px #5dabcd, 2px 3px 2px #378ab4, 3px 2px 2px #5dabcd, 3px 4px 2px #378ab4, 4px 3px 3px #5dabcd, 4px 5px 3px #378ab4, 5px 4px 2px #5dabcd, 5px 6px 2px #378ab4, 6px 5px 2px #5dabcd, 6px 7px 1px #378ab4, 7px 6px 1px #5dabcd, 7px 8px 0px #378ab4, 8px 7px 0px #5dabcd; }.class4.hero-name div { font-family: 'Anton', sans-serif; color: #e0eff2; background: #3a50d9; font: italic bold Georgia, Serif; text-shadow: -4px 3px 0 #3a50d9, -14px 7px 0 #0a0e27; }

 <section id="banner"> <div class="hero-name"> <div data-class="class1">Y</div> <div data-class="class2">O</div> <div data-class="class3">U</div> <div data-class="class4">R</div> <div></div> <div>N</div> <div>A</div> <div>M</div> <div>E</div> <div class="hero-pro"> <h2>Title Here</h2> </div> </div> </section>