javascript - 将鼠标悬停在每个字母上时如何更改字体系列 + 背景

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

就像我在评论中提到的那样，不可能使用纯 css 选择 previous sibling 姐妹或 parent 。
有多种方法可以解决这个问题。在这个例子中，我们将不同的文本样式定义为类，并将它们存储在专用字母标记的数据集中。
然后我们为字母添加了一个悬停监听器(在这个例子中有点草率，因为我们对 'hero-pro' 元素也这样做了，这是不必要的)。
稍后当悬停事件触发时，我们从目标字母数据集中检索类并将其应用于根元素
我稍微修改了你的代码，假设我正确理解你，你在追求这样的事情吗？

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>