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>