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を適用させる事で実装可能です。
↧
