0

When I try to change the font-family + text-shadow of a text from hovering over an n:th child, it doesn’t seem to work right as it needs to me hover over another area for it to be able to change styles. It works fine when I don’t have it change font-family when hovered on though.

HTML:

			
        <!-- Banner Section -->
        <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>

CSS:

			
.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);
}

Additionally, how do I make it so the first child is also changed when selecting the second child? I know '~' only affects the ones AFTER nth:child.

Anonymous Asked question May 14, 2021