###前提・実現したいこと
CSSを利用したタブによるコンテンツの表示切り替えを行いたいと思い、
https://codepen.io/flkt-crnpio/pen/WxROwy
こちらて提供されているソースを利用しました。
###発生している問題・エラーメッセージ
タブによる表示コンテンツの切り替えはうまくいったのですが、
左タブ選択時に表示されるコンテンツのうち、右半分部分がクリックできなくなりました。
文章の選択や、リンクのクリックなども無反応です。
これを全面クリックが行えるようにできたら、と考えております。
ですがこれは利用ブラウザにより異なる様子で、ChromeやSafariなどでは問題なく選択ができ、
FireFoxにて無反応となる状態です。
###該当のソースコード
HTMLは以下となり、
<div class="tabs"> <div class="tab-2"> <label for="tab2-1">左タブ</label> <input id="tab2-1" name="tabs-two" type="radio" checked="checked"> <div> <h4>左タブ内コンテンツ</h4> <p>左タブ内コンテンツ左タブ内コンテンツ左タブ内コンテンツ左タブ内コンテンツ左タブ内コンテンツ左タブ内コンテンツ左タブ内コンテンツ左タブ内コンテンツ左タブ内コンテンツ左タブ内コンテンツ左タブ内コンテンツ左タブ内コンテンツ左タブ内コンテンツ左タブ内コンテンツ左タブ内コンテンツ左タブ内コンテンツ左タブ内コンテンツ左タブ内コンテンツ左タブ内コンテンツ左タブ内コンテンツ左タブ内コンテンツ左タブ内コンテンツ左タブ内コンテンツ左タブ内コンテンツ左タブ内コンテンツ左タブ内コンテンツ左タブ内コンテンツ左タブ内コンテンツ左タブ内コンテンツ左タブ内コンテンツ</p> </div> </div> <div class="tab-2"> <label for="tab2-2">右タブ</label> <input id="tab2-2" name="tabs-two" type="radio"> <div> <h4>右タブ内コンテンツ</h4> <p>右タブ内コンテンツ右タブ内コンテンツ右タブ内コンテンツ右タブ内コンテンツ右タブ内コンテンツ右タブ内コンテンツ右タブ内コンテンツ右タブ内コンテンツ右タブ内コンテンツ右タブ内コンテンツ右タブ内コンテンツ右タブ内コンテンツ右タブ内コンテンツ右タブ内コンテンツ右タブ内コンテンツ右タブ内コンテンツ右タブ内コンテンツ右タブ内コンテンツ右タブ内コンテンツ右タブ内コンテンツ右タブ内コンテンツ右タブ内コンテンツ</p> </div> </div> </div>
CSSはこの様になります。
button:focus, input:focus, textarea:focus, select:focus { outline: none; } .tabs { display: block; display: -webkit-flex; display: -moz-flex; display: flex; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; flex-wrap: wrap; margin: 0; overflow: hidden; } .tabs [class^="tab"] label, .tabs [class*=" tab"] label { color: #efedef; cursor: pointer; display: block; font-size: 1.1em; font-weight: 300; line-height: 1em; padding: 2rem 0; text-align: center; } .tabs [class^="tab"] [type="radio"], .tabs [class*=" tab"] [type="radio"] { border-bottom: 1px solid rgba(239, 237, 239, 0.5); cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none; display: block; width: 100%; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .tabs [class^="tab"] [type="radio"]:hover, .tabs [class^="tab"] [type="radio"]:focus, .tabs [class*=" tab"] [type="radio"]:hover, .tabs [class*=" tab"] [type="radio"]:focus { border-bottom: 1px solid #fd264f; } .tabs [class^="tab"] [type="radio"]:checked, .tabs [class*=" tab"] [type="radio"]:checked { border-bottom: 2px solid #fd264f; } .tabs [class^="tab"] [type="radio"]:checked + div, .tabs [class*=" tab"] [type="radio"]:checked + div { opacity: 1; } .tabs [class^="tab"] [type="radio"] + div, .tabs [class*=" tab"] [type="radio"] + div { display: block; opacity: 0; padding: 2rem 0; width: 90%; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .tabs .tab-2 { width: 50%; } .tabs .tab-2 [type="radio"] + div { width: 200%; margin-left: 200%; } .tabs .tab-2 [type="radio"]:checked + div { margin-left: 0; } .tabs .tab-2:last-child [type="radio"] + div { margin-left: 100%; } .tabs .tab-2:last-child [type="radio"]:checked + div { margin-left: -100%; }
CSSのうち、
.tabs .tab-2 { width: 50%; } .tabs .tab-2 [type="radio"] + div { width: 200%; margin-left: 200%; z-index:100;} .tabs .tab-2 [type="radio"]:checked + div { margin-left: 0; z-index:101;} .tabs .tab-2:last-child [type="radio"] + div { margin-left: 100%; } .tabs .tab-2:last-child [type="radio"]:checked + div { margin-left: -100%; }
この部分がどうも怪しいと睨みました。
###試したこと
z-index:1000など行って見ましたが何の効果もありませんでした。
なぜfirefoxでのみこの様になるのか分かりません。
どうぞご教示いただきます様、おねがいいたします。
回答1件
あなたの回答
tips
プレビュー