マウスのロールオーバーについて
ブログのサイトタイトルの下にメニューバーをつけました。
メニューバーにマウスが乗った時、色を変えたいのですがCSSを書いたどの箇所に、
a:hover {
color:#999;
text-decoration:underline;
}
などのタグを入れたらいいのが分かりません。
どなたかお教えお願いします。
／＊HTML＊／
<div id="global">
<button class="button">
<span> </span>
<span> </span>
<span> </span>
</button>
<nav class="items">
<a href="#" class="item">サンプル</a>
<a href="#" class="item">サンプル</a>
<a href="#" class="item">サンプル</a>
<a href="#" class="item">サンプル</a>
</nav>
</div>
<div id="overlday"> </div>
／＊CSS ＊／
#global {
display: block;
width: 100%;
box-sizing: border-box;
margin-top: 0px;
background-color: #000000;
}
#global .button,
#overlday {
display: none;
}
#global .items {
display: flex;
justify-content: center;
}
#global .items > .item {
display: block;
color: #fff;
text-decoration: none;
box-sizing: border-box;
padding: 30px 30px;
border-right: 1px solid #fff;
border-left: 1px solid #fff;
}
#global .items > .item:last-of-type {
border-right: 1px solid #fff;
}
@media only screen and (max-width: 768px) {
#overlday {
display: none;
position: fixed;
z-index: 9;
left: 0;
top: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, .65);
}
#overlday.active {
display: block;
}
#global {
position: fixed;
z-index: 10;
left: 0;
top: 0;
text-align: right;
margin-top: 0;
background-color: transparent;
}
#global .button,
#global .button > span {
display: inline-block;
transition: all .4s;
box-sizing: border-box;
}
#global .button {
position: relative;
width: 40px;
height: 30px;
border: none;
cursor: pointer;
background: transparent;
margin: 10px;
}
#global .button > span {
position: absolute;
left: 0;
width: 100%;
height: 4px;
background-color: #ffffff;
border-radius: 4px;
}
#global .button > span:nth-of-type(1) {
top: 0;
}
#global .button > span:nth-of-type(2) {
top: 13px;
}
#global .button > span:nth-of-type(3) {
bottom: 0;
}
#global.active .button > span {
background-color: #fff;
}
#global.active .button > span:nth-of-type(1) {
transform: translateY(13px) rotate(-45deg);
}
#global.active .button > span:nth-of-type(2) {
opacity: 0;
}
#global.active .button span:nth-of-type(3) {
transform: translateY(-13px) rotate(45deg);
}
#global .items {
display: none;
flex-wrap: wrap;
text-align: left;
background-color: #9c9c9c;
}
#global.active .items {
display: flex;
}
#global .items > .item {
width: 100%;
padding: 10px;
border-right: none;
border-bottom: 1px solid #fff;
}
#global .items > .item:last-of-type {
border-bottom: none;
}
}
お礼
ありがとうございます 一気に解決しました