前提・実現したいこと
コンテンツ内の要素がhoverされた時、ヘッダー内のロゴ画像を変更したいのですが、CSSで実装可能でしょうか。
該当のソースコード
HTML
1<body> 2 <header> 3 <h1><a href="/">logo1</a></h1> 4 </header> 5 6 <div id="wrapper"> 7 <section id="section-1" class="section"> 8 <div id="button1" class="button"> 9 <span class="text">button1</span> 10 </div> 11 </section> 12 13 <section id="section-2" class="section"> 14 <div id="button2" class="button"> 15 <span class="text">button2</span> 16 </div> 17 </section> 18 </div> 19 20</body>
css
1header{ 2 display: block; 3 color: #FFF; 4 width: 100%; 5 height:10%; 6} 7 8h1 { 9 display: block; 10 height: 100%; 11 width: 100% 12 float: left; 13 padding: 10px; 14} 15 16 h1 a { 17 display: block; 18 width: 100%; 19 height: 100%; 20 font-size: 0; 21 background: url(/) left top no-repeat; 22 } 23 24#section2 #button2 .text:hover + h1 a{ 25/*ここでロゴの画像を変えたい*/ 26}
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。