Q&A
まだ質問が「受付中」になっていますが、「ベストアンサー」を選び「解決済」にされてはいかがでしょうか。
css(もしくはsass)で、hover時にaタグを表示させたいのですがうまくいきません。
現在のコード
css
1a{ 2 text-decoration: none; 3} 4.container{ 5 display:flex; 6 width:100%; 7 justify-content: center; 8 position: absolute; 9 top: 50%; 10 left: 50%; 11 transform: translate(-50%, -50%); 12} 13 14.wrap { 15 position: relative; 16 opacity:0; 17 -webkit-transform: translateY(-500%); 18 -ms-transform: translateY(-500%); 19 transform: translateY(-500%); 20} 21 22/*三角形１*/ 23.triangle1{ 24 border-top: 86.6025px solid rgb(230,0,18,0.7); 25 border-right: 50px solid transparent; 26 border-left: 50px solid transparent; 27 display: block; 28 transition-duration: 0.3s; 29} 30 31/*hover時アニメーション*/ 32.triangle1:hover{ 33 transform: scale(1.2); 34 transition-duration: 0.3s; 35} 36 37/*三角形２*/ 38.triangle2{ 39 border-right: 50px solid transparent; 40 border-bottom: 86.6025px solid rgb(76,175,80,0.7); 41 border-left: 50px solid transparent; 42} 43 44/*hover時アニメーション*/ 45.triangle2:hover{ 46 transform: scale(1.2); 47 transition-duration: 0.3s; 48} 49 50/*三角形の中に表示する文字*/ 51.text { 52 position: absolute; 53 top: 0; 54 right: 0; 55 bottom: 0; 56 left: 0; 57 margin: auto; 58 text-align: center; 59 display: none; 60 height:40%; 61} 62 63/*textに対するhoverアニメーション*/ 64.text:hover{ 65display:block 66} 67 68 69/*アニメーション設定*/ 70.wrap:nth-child(1) { 71 -webkit-animation: example 1.0s ease 0.2s 1 forwards; 72 animation: example 1.0s ease 0.2s 1 forwards; } 73 74.wrap:nth-child(2) { 75 -webkit-animation: example 1.0s ease 0.5s 1 forwards; 76 animation: example 1.0s ease 0.5s 1 forwards; } 77 78.wrap:nth-child(3) { 79 -webkit-animation: example 1.0s ease 0.2s 1 forwards; 80 animation: example 1.0s ease 0.2s 1 forwards; } 81 82.wrap:nth-child(4) { 83 -webkit-animation: example 1.0s ease 0.5s 1 forwards; 84 animation: example 1.0s ease 0.5s 1 forwards; } 85 86.wrap:nth-child(5) { 87 -webkit-animation: example 1.0s ease 0.2s 1 forwards; 88 animation: example 1.0s ease 0.2s 1 forwards; } 89 90.wrap:nth-child(6) { 91 -webkit-animation: example 1.0s ease 0.5s 1 forwards; 92 animation: example 1.0s ease 0.5s 1 forwards; } 93 94@-webkit-keyframes example { 95 100% { 96 opacity: 1; 97 -webkit-transform: translateY(0); 98 -ms-transform: translateY(0); 99 transform: translateY(0); } } 100@keyframes example { 101 100% { 102 opacity: 1; 103 -webkit-transform: translateY(0); 104 -ms-transform: translateY(0); 105 transform: translateY(0); } } 106
html
1<!DOCTYPE html> 2<html lang="en" dir="ltr"> 3 <head> 4 <link rel="stylesheet" href="style.css"> 5 <meta charset="utf-8"> 6 <title></title> 7 </head> 8 <body> 9 <div class="container"> 10 <div class="wrap"> 11 <div class="triangle1"></div> 12 <div class="text"> 13 <a href="#">top</a> 14 </div> 15 </div> 16 <div class="wrap"> 17 <div class="triangle2"></div> 18 <div class="text"> 19 <a href="#">top</a> 20 </div> 21 </div> 22 <div class="wrap"> 23 <div class="triangle1"></div> 24 <div class="text"> 25 <a href="#">top</a> 26 </div> 27 </div> 28 <div class="wrap"> 29 <div class="triangle2"></div> 30 <div class="text"> 31 <a href="#">top</a> 32 </div> 33 </div> 34 <div class="wrap"> 35 <div class="triangle1"></div> 36 <div class="text"> 37 <a href="#">top</a> 38 </div> 39 </div> 40 <div class="wrap"> 41 <div class="triangle2"></div> 42 <div class="text"> 43 <a href="#">top</a> 44 </div> 45 </div> 46 </div> 47 </body> 48</html>
よろしくお願いします。
回答1件
ベストアンサー
あなたの回答
tips
プレビュー
