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

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

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

HTMLの<div>タグです。<div>要素は特に意味を持っていません。ひとかたまりのコンテンツに使用されるか、(セマンティックとして)他の要素では記述できないコンテンツに使用されることが多いです。

hover

これは、HTMLの 擬似クラス[hover]に関するタグです。Hoverは与えられた要素へマウスカーソルを置くことを意味します。また、タッチ可能なデバイスでユーザーが要素へタッチすることをHoverと呼ぶ場合もあります。

デザイン

プログラミングでのデザインとは、プログラムの構成や、使用の信頼性・持続性・正確性・利便性の目標達成にはどうするのがベストなのか特定の選択を行うことです。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

2839閲覧

hover時に要素が揺れるアニメーションをcssで実装したい

omaturi

総合スコア1

div

HTMLの<div>タグです。<div>要素は特に意味を持っていません。ひとかたまりのコンテンツに使用されるか、(セマンティックとして)他の要素では記述できないコンテンツに使用されることが多いです。

hover

これは、HTMLの 擬似クラス[hover]に関するタグです。Hoverは与えられた要素へマウスカーソルを置くことを意味します。また、タッチ可能なデバイスでユーザーが要素へタッチすることをHoverと呼ぶ場合もあります。

デザイン

プログラミングでのデザインとは、プログラムの構成や、使用の信頼性・持続性・正確性・利便性の目標達成にはどうするのがベストなのか特定の選択を行うことです。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2021/05/05 05:15

前提・実現したいこと

div要素をhoverしたときに、揺れるアニメーションをつけたいです。
下記のようなコードで実装しましたが、デザインとしてつけた:afterの擬似要素が、hover時に何故かdiv.boxのborderより前、テキストより後ろに表示されます。
hoverする前のデザインのまま揺れるようにしたいです。

該当のソースコード

html

1<div class="box"><p>テキスト</p></div>

css

1.box { 2 width: 500px; 3 position: relative; 4 color: rgb(110, 110, 110); 5 font-size: 2em; 6 margin: 5%; 7 text-align: center; 8 border: 1px solid rgb(110, 110, 110); 9 padding: 3%; 10} 11 12.box:after { 13 position: absolute; 14 top: 8px; 15 left: 8px; 16 background-color: #fbf4bf; 17 width: 100%; 18 height: 100%; 19 content: ''; 20 z-index: -5; 21} 22 23.box:hover { 24 animation: rotate 0.7s ease-in-out both; 25} 26 27@keyframes rotate { 28 0% { 29 transform: rotate(0deg); 30 } 31 25% { 32 transform: rotate(6deg); 33 } 34 50% { 35 transform: rotate(-6deg); 36 } 37 75% { 38 transform: rotate(3deg); 39 } 40 100% { 41 transform: rotate(-1deg); 42 } 43}

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

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

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

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

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

guest

回答1

0

ベストアンサー

サンプルを作成して確認してみましたが、確かにそうなりますね。

ボーダーも疑似要素にしたらどうでしょう。
.box のborderは削除して下記の疑似要素を追加してみたらうまくいきました。

css

1.box::before { 2 position: absolute; 3 top: 0; 4 left: 0; 5 background-color: transparent; 6 width: 100%; 7 height: 100%; 8 content: ''; 9 border: 1px solid rgb(110, 110, 110); 10 display: block; 11 z-index: -1; 12}

投稿2021/05/05 06:07

hatena19

総合スコア33620

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

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

omaturi

2021/05/09 06:29

本当にありがとうございます!解決できました...!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問