ボタンにカーソルが乗った時にhoverでボタンの下に一覧を表示したいのですが、↓これで実行したら、ボタンだけでなく、一覧の部分の上にカーソルを乗せると一覧が出てきてしまいます。
理由は「cat:hoverでcatクラスに一覧の要素も入っているからだ!」と思い、クラスをbtnにしたら、今度はボタンにカーソルが乗っても反応しなくなりました。
どうすればいいでしょうか?
(ちなみにボタンのcssはbootstrapというフレームワークを使用しております。)
html
1<div class="cat" id="kokusai"> 2 <button type="button" class="btn btn-info">国際問題</button> 3 <ul> 4 <li><a href="#">歴史</a></li> 5 <li><a href="#">領土</a></li> 6 <li><a href="#">人権</a></li> 7 </ul> 8 </div>
css
1.cat { 2 display: block; 3 float: left; 4 width: 130px; 5 margin-right: 25px; 6 margin-top:33px; 7 padding: 0px; 8 position: relative; 9} 10.cat ul { 11 position: absolute; 12 background-color: #ccf; 13 width: 150px; 14 opacity: 0; 15 transition: opacity .2s linear; 16 overflow: scroll; 17 height: 150px; 18} 19.cat li { 20 height: 0px; 21 transition: height .2s linear; 22} 23.cat:hover > ul { 24 opacity: 1; 25} 26.cat:hover > ul > li { 27 height: 30px; 28}
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2015/10/01 00:55
2015/10/01 01:43
2015/10/01 08:00