How to change font family + background when hovering over each letter

Question

Hovering over each letter of the given text will change the entire font of the text + body background color. I have tried but my attempts have failed. Instead, the font only changes for the letters after the one that is being hovered, and I don't even know how to affect the body background color from within the div selectors.

.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>

Any solutions? JavaScript welcome.

Answer 1

like I mentioned in my comment, it's not possible to select previous siblings or parents with pure css..

there are multiple ways to go about this. in this example we define the different text styles as classes and store them in the dataset of the dedicated letter markup. we then add a hover listener to the letters( a bit sloppy in this example as we do that with the 'hero-pro' element aswell, which is unnecessary ).

later when the hover event fires we retrieve the class from the target letter dataset and apply it to the root element

I modified your code a bit, assuming I understood you correctly you're after something like this?

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>