ボタンクリックで中身表示した際のボタン背景を画像にし、切り替えをしたい。
クリックで表示・非表示されるものをinput、labelを使用して作成しています。
その際、ボタンとなる背景に画像を配置し、クリックで中身を表示した時にボタンの背景画像も切り替えたいのですがうまくいきません。
複数設置予定で、一つ一つ画像を変えたいのですがそれもうまくいかず手詰まり状態になってしまっています。
どうすれば実装できるか、、他に方法があればご教示いただきたいです。
該当のソースコード
html
1<div class="btn_area"> 2 <input type="checkbox" id="btn1"> 3 <label for="btn1">+</label> 4 5 <div class="hidden_show"> 6 <p>タイトル</p> 7 <p>テキストテキストテキストテキストテキスト<br> 8 テキストテキストテキストテキストテキスト<br> 9 テキストテキストテキストテキストテキスト</p> 10 </div> 11</div> 12 13<div class="btn_area"> 14 <input type="checkbox" id="btn2"> 15 <label for="btn2">+</label> 16 17 <div class="hidden_show"> 18 <p>タイトル</p> 19 <p>テキストテキストテキストテキストテキスト<br> 20 テキストテキストテキストテキストテキスト<br> 21 テキストテキストテキストテキストテキスト</p> 22 </div> 23</div>
css
1.btn_area{ 2 margin: 0; 3 padding: 0; 4 text-align: center; 5} 6.btn_area label{ 7 margin: 0%; 8 padding: 10%; 9 width: 100%; 10 display: inline-block; 11 background: #445566; 12 cursor: pointer; 13 transition: 0.5s; 14} 15.hidden_show{ 16 background: #667788; 17} 18 19.btn_area input{ 20 display: none; 21} 22.btn_area .hidden_show{ 23 height: 0; 24 padding: 0; 25 overflow: hidden; 26 opacity: 0; 27 transition: 0.8s; 28} 29.btn_area input:checked ~ .hidden_show{ 30 padding: 10px 0px; 31 height: auto; 32 opacity: 1; 33}
追記:背景に画像を配置する際はlabelに対して試していましたが、画像が切れてしまっていたり中身が表示されなくなってしまっていました。
css
1.btn_area label{ 2 margin: 0%; 3 padding: 10%; 4 width: 100%; 5 display: inline-block; 6 background: #445566; 7 cursor: pointer; 8 transition: 0.5s; 9 background-image: url("../images/○○○○○.png"); 10 background-size: 100% auto; 11 display: block; 12 float: left; 13}
試したこと
id名に対してbackground指定しても変わらず、検索してもなかなか思うような情報にたどり着けず
こちらで質問させていただきました。
回答1件
あなたの回答
tips
プレビュー