Q&A
どうなったら「解決」なのでしょうか。
「子要素への継承をさせない」のでしたらそのまま調べたら出てきそうに思います。
前提・実現したいこと
親要素に疑似要素を使ったアニメーションをcssで指定しました。
すると、子要素の疑似要素に影響が出てしまいます。
発生している問題・エラーメッセージ
正しい姿
親要素にアニメーションを指定すると、矢印の丸枠が消えてしまいます。
該当のソースコード
html
1<body> 2 <div class="box"> 3 <p>この文章をホバー</p> 4 <div class="arrow"></div> 5 </div>
css
1body { 2 background-color: black; 3 color: #fff; 4} 5 6/* 矢印を描く */ 7 8.box { 9 margin: 0 auto; 10 margin: 100px; 11 width: 50%; 12 border: 1px solid #fff; 13 display: flex; 14 justify-content: space-between; 15} 16 17.arrow { 18 position: relative; 19 display: inline-block; 20 padding: 0 0 0 30px; 21 color: #fff; 22 text-decoration: none; 23 font-size: 15px; 24 margin-left: 50px; 25} 26 27.arrow::before, 28.arrow::after { 29 position: absolute; 30 top: 0; 31 bottom: 0; 32 left: 0; 33 margin: auto; 34 content: ""; 35 vertical-align: middle; 36} 37 38.arrow::before{ 39 box-sizing: border-box; 40 width: 33px; 41 height: 33px; 42 border: 1px solid #fff; 43 -webkit-border-radius: 50%; 44 border-radius: 50%; 45} 46.arrow::after{ 47 left: 8px; 48 width: 8px; 49 height: 8px; 50 border-top: 1px solid #fff; 51 border-right: 1px solid #fff; 52 -webkit-transform: rotate(45deg); 53 transform: rotate(45deg); 54}
css
1.box { 2 position: relative; 3 overflow: hidden; 4 transition: ease 0.2s; 5} 6 7.box:before { 8 content: ''; 9 position: absolute; 10 top: 0; 11 left: 0; 12 z-index: 2; 13 background: rgb(255, 255,255,0.7); 14 width: 100%; 15 height: 100%; 16 transition: transform .8s cubic-bezier(0.8, 0, 0.2, 1) 0s; 17 transform: scale(0, 1); 18 transform-origin: top; 19} 20 21.box:hover:before{ 22 transform:scale(1, 1); 23}
補足情報
解決策をご存じの方がいらっしゃいましたら、教えて頂けると大変助かります。
よろしくお願い致します。
「子要素への継承をさせない」という発想があるのですね。
恥ずかしながら、知りませんでした。
〇〇:initialを指定することで、解決しました。
ありがとうございます！
「継承」という考え方を知っているかどうかはありますが、
知っていなくてもおおよそ「css 親要素 子要素 影響 無効」のようなキーワードで調べていけばたどり着けたかもしれません。
そのあたりご自身でまとめたうえで回答として投稿し、自己解決としてください。
回答1件
0
自己解決
initiallを指定することで、解決。
投稿2021/06/20 11:45
総合スコア9
initialですかね。回答なのでそこは正確にしてもらいたいところです。
できれば、initialにどうやってたどり着けたのかを具体的に記載すると、後から見る人が参考になります。
あなたの回答
tips
プレビュー
