投稿2020/03/08 09:44
編集2020/03/08 10:59CSSで、メニューの項目にマウスホバーをしたら背景色が変わるようにしたいです。
メニューをアコーディオンメニューにしてトランジションを設定したらhoverが効かなくなりました。
それまでは効いていたのでトランジションのどこかの記述がhoverを打ち消しているのだと思うのですがわかりません。
初心者です。途方に暮れています。
HTML
<nav class="menu"> <label for="menu_bar01">▼メニュー▼</label> <input type="checkbox" id="menu_bar01" class="accordion" /> <ul id="links01"> <li><a href="#">はじめに</a></li> <li><a href="#">１</a></li> <li><a href="#">２</a></li> <li><a href="#">３</a></li> <li><a href="#">４</a></li> <li><a href="#">５</a></li> <li><a href="#">６</a></li> <li><a href="#">７</a></li> <li><a href="#">８</a></li> <li><a href="#">９</a></li> <li><a href="#">１０</a></li> </ul> </nav>CSS
.menu {
max-width: 600px; }
input {
display: none; }
label {
display: block;
font-size: 28px;
font-weight: 600;
color: #000;
margin: 0 0 4px 0;
padding : 15px;
line-height: 1;
background : #F9E562;
cursor :pointer;
border: 4px solid #AF7912; }
.menu ul {
width: 100%;
list-style: none;
margin: 0;
padding: 0; }
.menu li {
height: 0;
overflow: hidden;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-ms-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s; }
.menu ul li a {
display: block;
padding: 2%;
font-size: 24px;
font-weight: 700;
text-decoration: none;
background: #fff;
color: #222;
text-align: center;
margin: 10;
border: 3px solid #000; }
.menu ul li a:hover {
background: #888; }
hoverの効かない場合について色々調べたり記述の順番を変えたりしましたが一向に効きません。
ご指摘をいただいて空白を詰めたのですが駄目でした。
ツールはBracketsを使っています。
回答1件
0
ベストアンサー
htmlがない上、CSSを見る限りでも不思議な点がいくつかあるのでこれだけで直るかはわかりませんが、少なくとも、a:hoverはこのようにスペースを入れずに書かないと効きませんよ。可能であればhtmlも載せてください。
css
1.menu ul li a:hover { 2 background: #888; 3}
追記
コメントを受けて。
以下のようにhoverは効いています。（liの高さを変更して見えるようにしてあります。）
投稿2020/03/08 10:04
編集2020/03/08 11:31
総合スコア757
あなたの回答
tips
プレビュー
Q&A
