タブをマウスオーバーで切り替えるナビゲーションを作成したいのですが、
タブの中身( <div class="hide"></div>の中)にaタグを追加し、
そのaタグをマウスオーバーするとタブの中身(<div class="hide"></div>)がdisplay:noneになってしまい非表示になってしまいます。
aタグをマウスオーバーしても表示されるようにしたいのですが可能でしょうか?
よろしくお願いいたします。
<head> <meta charset="utf-8"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <title>無題ドキュメント</title> <script> $(function() { $('.tab li').hover(function() { var tabnum = $('.tab li').index(this); $('.content div').css('display','none'); $('.content div').eq(tabnum).css('display','block'); $('.tab li').removeClass('select'); $(this).addClass('select') }); $('.hide').mouseout(function() { this.style.display = "none"; }); }); </script> <style> .tabmenu { width: 60%; } .tab { overflow: hidden; margin: 0; padding: 0; list-style: none; } .tab li { cursor: pointer; display: inline-block; width: auto; padding: .3em; font-weight: bold; } .tab li.select { border-bottom: solid 4px #fdbb30; } .content div { height: auto; padding: .6em; border: solid 1px #ccc; } .hide { display: none; } </style> </head> <body> <div class="tabmenu"> <ul class="tab"> <li><a href="dummy">ひとつめのタブ</a></li> <li>ふたつめのタブ</li> <li>みっつめのタブ</li> </ul> <div class="content"> <div class="hide"><a href="dummy">ひとつめのなかみ</a></div> <div class="hide">ふたつめのなかみふたつめのなかみ</div> <div class="hide">みっつめのなかみみっつめのなかみみっつめのなかみ</div> </div> </div> </body> </html>
回答1件
あなたの回答
tips
プレビュー