【CSS】hoverタグ内のspanタグの色をhover時に色を可変

cinema.vue

<template>
  <header class="header">
    <router-link to="/" class="header-ttl">
      <span class="header-ttl-color">C</span>inema</router-link
    >
    <ul class="header-menu">
      <li>
        <router-link to="/first" class="header-link">初めての方へ</router-link>
      </li>
      <li>
        <router-link to="/signup" class="header-link">新規登録</router-link>
      </li>
      <li>
        <router-link to="/signin" class="header-link">ログイン</router-link>
      </li>
      <li>
        <span class="dropdown-menu" @click="open">
          <a class="header-link"
            >マイページ<span class="dropdown-arrow"></span
          ></a>
          <ul class="dropdown" :class="{ isOpen }">
            <li class="dropdown-items">
              <router-link to="/mypage" class="dropdown-link"
                >マイページ</router-link
              >
            </li>
            <li class="dropdown-items">
              <router-link to="/profile" class="dropdown-link"
                >プロフィール編集</router-link
              >
            </li>
            <li class="dropdown-items">
              <button
                class="dropdown-link"
                @click="signOut"
                v-if="authenticatedUser"
              >
                ログアウト
              </button>
            </li>
          </ul>
        </span>
      </li>
    </ul>
  </header>
</template>

⑴hoverタグ内のspanタグの色をhover時に色を可変

html

 <router-link to="/" class="header-ttl">
      <span class="header-ttl-color">C</span>inema</router-link>

css

a.header-ttl:hover,
a.header-ttl:hover span {
  color: darkgray;
}

上記については、header-ttlに対してheverを指定し、
またheader-ttl内にあるspanタグに対してheverを指定することで実装可能です。

⑵hoverタグ内のspanタグ内の色をhover時に色を可変

html

<span class="dropdown-menu" @click="open">
          <a class="header-link"
            >マイページ<span class="dropdown-arrow"></span>
          </a>

css

 &-link {
    color: #fff;
    font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
    text-decoration: none;
    background-color: transparent;
    border: none;
    outline: none;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    cursor: hand;
    margin-left: 3rem;
    &:not(:first-child) {
      margin-left: 2rem;
    }
    &:hover {
      color: #bbb;
    }
  }

.dropdown-arrow {
  width: 0px;
  height: 0px;
  position: absolute;
  top: 9px;
  right: -20px;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 7px solid white;
  .header-link:hover & {
    border-top-color: #bbb;
  }
}

上記のドロップダウンメニューの「 ▼ 」はボーダーでできていますので、
⑴同様の方法で文字色を変えても有効にはなりません。

css

.header-link:hover & {
    border-top-color: #bbb;
  }

border-top-colorのみにhoverを適用させる事で実装可能です。