html
1 <div class="banner"> 2 <div class="img1"> 3 <p><a href="">目指す</a></p> 4 </div> 5 </div>
css
1.banner .img1 { 2 flex: 0 1 50%; 3 margin: 10px 0; 4 height: 200px; 5 opacity: 0.2; 6 transition: 2.5s; 7 position: relative; 8 9} 10.banner .img1:hover { 11 opacity: 1; 12 13} 14 15.banner .img1:after { 16 content: ''; 17 position: absolute; 18 /* border: 1px solid #fff;*/ 19 display: none; 20 top: 0; 21 left: 0; 22 width: 100%; 23 height: 100%; 24 transform: scale(0.9); 25 transition: 5s; 26 border: 1px solid none; 27} 28 29.banner .img1:hover:after { 30 display: block; 31 border: 10px solid #fff; 32} 33 34
img要素に border: 10px solid #fff;をつけたら聞いたのでtransitionは擬似要素には効かないのでしょうか。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/02/01 02:55