http://chocobat.jp/
上記のページで勉強しているのですが
商品コンテンツ部分の
商品と、詳細ボタンをマウスホバーで一緒に動かすには、どうしたらいいでしょうか?
お願いします。
こちら模写したサイトです。↓
https://honnmaport.xsrv.jp/design01/index.html
html
1コード 2<div class="content_box"> 3<div class="main_box2"> 4 <section class="main_label" id="inline_1"> 5 <ul class="content_1"> 6 <li class="content_1a"><img src="img/main/content_1a.png" alt="a"></li> 7 <li class="content_1b"><img src="img/main/content_1b.png" alt="b"></li> 8 <li class="content_1c"><img src="img/main/content_1c.png" alt="c"></li> 9 </ul> 10 <p>ヒット量産!チーム1の安打製造機</p> 11 <h2>チョコバット</h2> 12 <ul class="main_box"> 13 <li> 14 <h3 class="main_value">1964年発売のロングセラー!<br> 15 パン生地にチョコレートをコーディング<br> 16 した食べやすいスティックタイプ。</h3> 17 </li> 18 <li><a href="#"><img src="img/main/btn_1.png" class="main_btn" alt="詳細"></a></li> 19 <li><a href="#"><img src="img/main/btn_2.png" class="btn_link" alt="詳細"></a></li> 20 </ul> 21 </section>
css
1コード 2.main_content{ 3 width:1200px; 4 margin:0 auto; 5} 6.content_box{ 7 width:980px; 8 height:900px; 9 margin:0 auto; 10 position:relative; 11} 12.main_label p{ 13 font-size:12px; 14 padding-top:8px; 15} 16.main_box{ 17 position:relative; 18} 19.main_value{ 20 width:75%; 21 text-align:left; 22 margin:0 auto; 23 border-top:dotted 1px ; 24} 25.main_value2{ 26 width:83%; 27 text-align:left; 28 margin:0 auto; 29 border-top:dotted 1px ; 30} 31.main_value3{ 32 width:83%; 33 text-align:left; 34 margin:0 auto; 35 border-top:dotted 1px ; 36} 37.main_btn{ 38 position:absolute; 39 top:-11px; 40 right:16px; 41 z-index:10; 42 transition: all ease .3s; 43} 44.main_btn:hover,.main_btn2:hover{ 45 opacity:0; 46} 47.main_btn2{ 48 position:absolute; 49 top:-9px; 50 right:-12px; 51 z-index:10; 52 transition: all ease .3s; 53} 54.btn_link{ 55 position:absolute; 56 top:-11px; 57 right:16px; 58} 59.btn_link2{ 60 position:absolute; 61 top:-9px; 62 right:-12px; 63} 64.main_box2{ 65 display:flex; 66 position: absolute; 67 top:0px; 68 left:-130px; 69} 70.main_box3{ 71 position:absolute; 72 left:-192px; 73 top:449px; 74} 75.content_1{ 76 position:relative; 77} 78.content_1a{ 79 position:relative; 80} 81.content_1b{ 82 display:block; 83 width:50px; 84 height:50px; 85 position: absolute; 86 top:36px; 87 transition: all ease .3s; 88} 89.content_1b:hover{ 90 top:26px; 91} 92.content_1c{ 93 position: absolute; 94 right:18px; 95 bottom:0; 96}#inline_1{ 97 position:absolute; 98 left:96px; 99}
追記です。
説明不足ですいません。
実際のサイトでは、詳細ボタンをマウスオーバーすると、商品であるチョコバットも、一緒に反応して動きます。
この動きを再現したいのですが、どうしたらいいかわからないです。
「商品と、詳細ボタンをマウスホバーで一緒に動かす」とは?要件を具体的に記載してください。
回答1件
あなたの回答
tips
プレビュー