hoverにてspanタグで作った矢印も色を変えたいです。

前提・実現したいこと

現在、vue.jsにてポートフォリオを作成しております。
（プログラミング自体勉強し初めて約３ヶ月ほどと浅いため、ご了承のほどお願いします。）

初歩的なことですが、以下を実装したいのですが、上手くいかず困ってます。vueのことでもなく、cssですが。。

◆マイページの横にdropdown-arrowを作って、逆三角形の矢印を配置したのですが、
（マイページのaタグ内にspanタグで作りました）hoverで色をマイページと矢印同時に色をgrayに変えたいです。
現状、矢印だけ色がhoverしても色が変わらない状況です。
タイトル部分でも同じことをしているのですが、同じ方法を試しても上手くいきませんでした。。

勉強し始めたばかりなので至らぬ点が多いかとお思いますが、どこをどう直したら良いかご教授いただけると幸いです。
宜しくお願い致します。

該当のソースコード

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

vue
1<script>
2import firebase from "firebase";
3
4export default {
5  name: "signOut",
6  data() {
7    return {
8      authenticatedUser: "",
9      isOpen: false,
10    };
11  },
12  methods: {
13    signOut: function() {
14      firebase
15        .auth()
16        .signOut()
17        .then(() => {
18          // alert("ログアウトしました。");
19          this.$router.push("/signin");
20        })
21        .catch(() => {
22          // alert("ログアウトができません。");
23        });
24    },
25    open: function() {
26      this.isOpen = !this.isOpen;
27    },
28  },
29
30  mounted() {
31    firebase.auth().onAuthStateChanged((user) => {
32      if (user) {
33        this.authenticatedUser = true;
34      } else {
35        this.authenticatedUser = false;
36      }
37    });
38  },
39};
40</script>

css
1
2<style lang="scss">
3@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@1,500&display=swap");
4
5.header {
6  position: sticky;
7  top: 0;
8  background-color: #000000;
9  padding: 1rem 3rem;
10  z-index: 999;
11  display: flex;
12  align-items: center;
13  &-ttl {
14    color: #fff;
15    font-size: 2rem;
16    font-weight: bold;
17    text-decoration: none;
18    background-color: transparent;
19    border: none;
20    outline: none;
21    font-family: "Roboto", sans-serif;
22    &-color {
23      color: grey;
24      font-size: 2.5rem;
25    }
26  }
27  &-menu {
28    display: flex;
29    margin-left: auto;
30    .dropdown-menu {
31      position: relative;
32      display: flex;
33      .dropdown-link {
34        color: #fff;
35        font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
36        text-decoration: none;
37        background-color: transparent;
38        border: none;
39        outline: none;
40        font-size: 1rem;
41        font-weight: bold;
42        cursor: pointer;
43        cursor: hand;
44        &:hover {
45          color: grey;
46        }
47      }
48    }
49  }
50  &-link {
51    color: #fff;
52    font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
53    text-decoration: none;
54    background-color: transparent;
55    border: none;
56    outline: none;
57    font-size: 1rem;
58    font-weight: bold;
59    cursor: pointer;
60    cursor: hand;
61    margin-left: 3rem;
62    &:not(:first-child) {
63      margin-left: 2rem;
64    }
65    &:hover {
66      color: #bbb;
67    }
68    .dropdown-arrow {
69      width: 0px;
70      height: 0px;
71      position: absolute;
72      top: 9px;
73      right: -20px;
74      border-left: 6px solid transparent;
75      border-right: 6px solid transparent;
76      border-top: 7px solid white;
77      &:hover {
78        color: #bbb;
79      }
80    }
81  }
82}
83
84.dropdown {
85  width: 10rem;
86  height: auto;
87  position: absolute;
88  top: 50px;
89  right: -47px;
90  display: none;
91  background-color: #000000;
92  &-items {
93    padding: 1rem;
94    border-bottom: 1px solid #fff;
95  }
96}
97
98.isOpen {
99  display: block;
100}
101
102a.header-ttl:hover,
103a.header-ttl:hover span {
104  color: #bbb;
105}
106</style>

行動規範の内容に同意します

回答1件

ベストアンサー

その三角形はボーダーでできていますので、文字色を変えても有効にはなりません。
このようにするとどうでしょうか。

scss
1//...
2  &-link {
3//...
4    &:hover {
5      color: #bbb;
6// 追加ここから
7      .dropdown-arrow {
8        border-top-color: #bbb;
9      }
10// 追加ここまで
11    }
12    .dropdown-arrow {
13//...