質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Q&A

解決済

1回答

1462閲覧

hover要素内にリンクの要素を加えたい

yesman

総合スコア21

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

0グッド

0クリップ

投稿2018/07/20 05:16

編集2018/07/20 06:00

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}

追記です。
説明不足ですいません。 
実際のサイトでは、詳細ボタンをマウスオーバーすると、商品であるチョコバットも、一緒に反応して動きます。
この動きを再現したいのですが、どうしたらいいかわからないです。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2018/07/20 05:53

「商品と、詳細ボタンをマウスホバーで一緒に動かす」とは?要件を具体的に記載してください。
guest

回答1

0

ベストアンサー

これをやめて

Css

1.content_1b:hover{ 2 top:26px; 3}

こうかな

CSS

1#inline_1:hover .content_1b { 2 top: 26px; 3}

追記(2018/07/24)

.content_1b:hoverだとcontent_1bクラスにhoverされた時に反映されるCSSになります。
同様に#inline_1:hoverだとinline_1クラス(id)にhoverされた時に反映されるCSSになります。

ご存知の通り、CSSでは半角スペースであけることで親子(孫)の関係を関係を示すことができるので
#inline_1:hover .content_1bとすると親が#inline_1:hover、子孫がcontent_1bとなります。

よって#inline_1:hover .content_1binline_1クラス(id)にhoverされた時にcontent_1bに反映されるCSSということになります。

投稿2018/07/20 07:44

編集2018/07/24 00:16
macaron_xxx

総合スコア3191

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yesman

2018/07/20 13:18

ありがとうございます。 修正したら直りました。助かります。 hoverの後にクラスを付ける方法があるんですね!
yesman

2018/07/20 13:19

もしよければ 仕組みも聞いてもいいでしょうか?
macaron_xxx

2018/07/24 00:16

詳細な説明を回答に追記しました。 わからなければまた質問してください。
yesman

2018/07/25 17:00

ご返事ありがとうございます。 hoverの仕組みについて勉強になりました。 分かりやすく、助かりました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問