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

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

ただいまの
回答率

88.90%

親要素hover時に子要素を動かすようにしたい

解決済

回答 3

投稿

  • 評価
  • クリップ 1
  • VIEW 1,169

gumin

score 4

フッター部分にhover時に要素の下のアンダーラインが動くようなアニメーションをcssで作成しています。
アニメーションまではできたのですが、子要素の下の部分に線の位置を変更したいです。

Tel
000-000-0000
受付時間
定休日
ーーーーーーー

となっているのを

Tel
ーーーーーーー
000-0000-0000
受付時間
定休日

としたいのですが、指定がなかなかうまくいきません。
またhoverの範囲はTel部分だけではなくclass="telephone"の要素をhover時に変更するようにしたいです。
どこを修正すれば、class="telephone"をhover時に"Tel"下のアンダーラインが動くかご教授いただけないでしょうか。

ソースコード

<div class="common-footer">
  <div class="inquiry">
    <div class="contact">お問い合わせはこちら</div>
    <div class="information">
      <div class="mail"><p class="inquiry-title">Contact<br/>us</p></div>
      <div class="telephone"><p class="inquiry-title">Tel</p><p class="tel-info">000-000-0000</p><p class="recept-time">受付時間:平日 10:00~17:00<br/>定休日:土曜・日曜・祝日・年末年始</p></div>
    </div> 
  </div>
</div>
.common-footer{
  background: #027;
  color: #fff;
  width: 100%;
  padding:7%
}
.inquiry{
  margin-right:10%;
  width: 600px;
  margin-left: auto;
}
.information{
  display:flex;
}
    .contact{
        padding-bottom:60px;
        margin-right: 20%;
        text-align:center;
    }
    .mail{
        margin-right:30px;
        position: relative;
    }
    .telephone{
        position: relative;
        margin-left:30px;
    }
    .inquiry-title{
        font-size: 72px;
        line-height: 66px;
        margin-bottom:5px;
    }
    .tel-info{
        font-size:16px;
    }
    .recept-time{
        font-size:10px;
    }

/* アンダーライン */
.mail::before, .telephone::before{
  display:block;
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 1px;
  background: #fff;
  transition: all .4s;
}
.mail:hover::before, .telephone:hover::before {
  transform:translate3d(119%,0,0);
}
.mail:hover::after, .telephone:hover::after {
  transform:translate3d(0,0,0)
}


@media screen and (min-width:768px) {
.mail, .telephone {
  overflow:hidden;
}
.mail::before, .telephone::before{
  width:100%;
  bottom:0
 }
.mail::after, .telephone::after{
 display:block;
 content:'';
 width:100%;
 height:1px;
 bottom:-7px;
 left:0;
 position:absolute;
 background-color:#fff;
 transition:all .4s;
 transition-delay:.1s;
 transform:translate3d(-100%,0,0)
}
}
@media screen and (max-width:768px) {
 .mail::after, .telephone::after {
  display:none
 }
}
@media screen and (min-width:768px) {
 .mail::after, .telephone::after{
  width:100%;
  bottom:0
 }
}

どこが修正に必要かわからないため、一旦ソースすべて掲載させていただきます。。。

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 3

checkベストアンサー

+2


Tel
ーーーーーーー
000-0000-0000
受付時間
定休日 


ラインの位置を ▲ にしたいのであれば

.mail::before, .telephone::before{
  display:block;
  content: '';
  position: absolute;
/* これを削除  bottom: -1px; */
  top: 1.4em; /* 上からの距離を追加 */
  left: 0;
/* 以下略 */
}


top のサイズは
余白、font、line-heightなどによりますので
調整して頂けば良いかと思います^^

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/07/06 10:27

    "inquiry-title"領域に疑似属性等を使用してなんとかしなければいけないと思っていたのですが、非常にシンプルでかつ動作も問題なく動きましたので、ベストアンサーにさせていただきます!

    キャンセル

+1

こんにちは。
こんな感じですか。

サンプル

    .inquiry-title{
        position: relative; /* 追加 */
        font-size: 72px;
        line-height: 66px;
        margin-bottom:5px;
    }

.mail::before, .telephone .inquiry-title::before{ /* 変更 */

.mail:hover::before, .telephone:hover .inquiry-title::before { /* 変更 */

.mail:hover::after, .telephone:hover .inquiry-title::after { /* 変更 */

.mail::before, .telephone .inquiry-title::before{ /* 変更 */

.mail::after, .telephone .inquiry-title::after{ /* 変更 */

 .mail::after, .telephone .inquiry-title::after { /* 変更 */

 .mail::after, .telephone .inquiry-title::after{ /* 変更 */

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

+1

  • .telephone内の.inquiry-titleを<div class="wrap"></div>で囲む
  • スタイルシート修正・追加
 /*追加*/
.telephone .wrap{
position:relative;
}

 /*修正*/
.mail::before, .telephone .inquiry-title::before{

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/07/02 12:44

    あとはhoverにあわせたcssも適宜調整

    キャンセル

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

  • ただいまの回答率 88.90%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る