Q&A
メディアクエリでhoverできるかどうかの指定できるんですね…
メディアクエリエアプがバレてしまった…
前提・実現したいこと
アコーディオンメニュー付きグローバルナビを作成しておりますが、アコーディオン部分がPCではマウスhoverした時スマホではクリックした時に表示されるよう分けたいと考えています。スマホ表示させたときにホバー機能を解除するのはどうしたらいいでしょうか？
該当のソースコード
<html> <header> <nav> <ul> <li><a href="#">トップ</a></li> <li class="sub-menu"><a href="#">商品一覧</a> <ul> <li><a href="#">Link1</a></li> <li><a href="#">Link2</a></li> <li><a href="#">Link3</a></li> </ul> </li> <li class="sub-menu"><a href="#">お問い合わせ</a> <ul> <li><a href="#">Link4</a></li> <li><a href="#">Link5</a></li> <li><a href="#">Link6</a></li> </ul> </li> <li><a href="#">ご購入案内</a></li> <li><a href="#">店舗情報</a></li> <li><a href="#">会社案内</a></li> </ul> </nav> <div class="menu-toggle"><i class="fa fa-bars" aria-hidden="true"></i></div> </header> <css> header nav{ float: right; }header nav ul{
margin: 0;
padding: 0;
display: flex;
}
header nav ul li{
list-style: none;
position: relative;
}
header nav ul li ul{
position: absolute;
left: 0;
background: rgba(34, 49, 52, 0.9);
display: none;
}
header nav ul li.active ul{
display: block;
}
header nav ul li:hover ul{
display: block;
}
header nav ul li ul li{
display: block;
width: 200px;
}
header nav ul li a{
height: 50px;
line-height: 50px;
padding: 0 20px;
color: #fff;
text-decoration: none;
display: block;
}
header nav ul li a:hover,
header nav ul li a.active{
color: #000;
background: #fff;
}
.menu-toggle{
color: #fff;
float: right;
line-height: 50px;
font-size: 24px;
cursor: pointer;
display: none;
}
@media (max-width: 991px){
header{
padding: 0 20px;
}
.menu-toggle{
display: block;
}
header nav{
position: absolute;
width: 100%;
height: calc(100vh - 50px);
background-color: rgba(34, 49, 52, 0.9);
top: 50px;
left: -100%;
transition: 0.5s;
}
header nav.active{
left: 0;
}
header nav ul{
display: block;
text-align: center;
}
header nav ul li a{
border-bottom: 1px solid rgba(0,0,0, .2);
}
header nav ul li.sub-menu:before{
content: '\f0d7';
font-family: fontAwesome;
position: absolute;
line-height: 50px;
color: #fff;
right: 5px;
}
header nav ul li.active.sub-menu:before{
content: '\f0d8';
}
header nav ul li.active ul{
position: relative;
background: rgba(34, 49, 52, 0.9);
}
header nav ul li ul li{
width: 100%;
}
試したこと
ここに問題に対して試したことを記載してください。
補足情報（FW/ツールのバージョンなど）
ここにより詳細な情報を記載してください。
回答3件
0
ベストアンサー
なに？スマホだけプロパティを解除しようとしてもうまくいかない？
逆に考えるんだ、**「PCだけの対応にしちゃってもいいさ」**と…
:hover周りのプロパティを@media screen and (min-width:1280px)とかで囲んでやればいいんじゃないかと思います。
ええ、maxではなくminで。最小幅1280px指定ならば恐らくはPCでしか作動しないでしょう。
投稿2020/05/19 07:25
編集2020/05/19 07:30総合スコア354
0
これのほうが直接的かな。
【hover - CSS: カスケーディングスタイルシート | MDN】
https://developer.mozilla.org/ja/docs/Web/CSS/@media/hover
CSS
1@media (hover: hover) { 2 a:hover { 3 background: yellow; 4 } 5}
投稿2020/05/19 07:49
総合スコア69606
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/05/19 07:37