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

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

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

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

解決済

css/hover時のaタグ表示について

TAIniko
TAIniko

総合スコア0

CSS

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

1回答

0評価

0クリップ

7閲覧

投稿2019/04/01 02:11

css(もしくはsass)で、hover時にaタグを表示させたいのですがうまくいきません。

現在のコード

css

a{ text-decoration: none; } .container{ display:flex; width:100%; justify-content: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .wrap { position: relative; opacity:0; -webkit-transform: translateY(-500%); -ms-transform: translateY(-500%); transform: translateY(-500%); } /*三角形1*/ .triangle1{ border-top: 86.6025px solid rgb(230,0,18,0.7); border-right: 50px solid transparent; border-left: 50px solid transparent; display: block; transition-duration: 0.3s; } /*hover時アニメーション*/ .triangle1:hover{ transform: scale(1.2); transition-duration: 0.3s; } /*三角形2*/ .triangle2{ border-right: 50px solid transparent; border-bottom: 86.6025px solid rgb(76,175,80,0.7); border-left: 50px solid transparent; } /*hover時アニメーション*/ .triangle2:hover{ transform: scale(1.2); transition-duration: 0.3s; } /*三角形の中に表示する文字*/ .text { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; text-align: center; display: none; height:40%; } /*textに対するhoverアニメーション*/ .text:hover{ display:block } /*アニメーション設定*/ .wrap:nth-child(1) { -webkit-animation: example 1.0s ease 0.2s 1 forwards; animation: example 1.0s ease 0.2s 1 forwards; } .wrap:nth-child(2) { -webkit-animation: example 1.0s ease 0.5s 1 forwards; animation: example 1.0s ease 0.5s 1 forwards; } .wrap:nth-child(3) { -webkit-animation: example 1.0s ease 0.2s 1 forwards; animation: example 1.0s ease 0.2s 1 forwards; } .wrap:nth-child(4) { -webkit-animation: example 1.0s ease 0.5s 1 forwards; animation: example 1.0s ease 0.5s 1 forwards; } .wrap:nth-child(5) { -webkit-animation: example 1.0s ease 0.2s 1 forwards; animation: example 1.0s ease 0.2s 1 forwards; } .wrap:nth-child(6) { -webkit-animation: example 1.0s ease 0.5s 1 forwards; animation: example 1.0s ease 0.5s 1 forwards; } @-webkit-keyframes example { 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } @keyframes example { 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } }

html

<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <link rel="stylesheet" href="style.css"> <meta charset="utf-8"> <title></title> </head> <body> <div class="container"> <div class="wrap"> <div class="triangle1"></div> <div class="text"> <a href="#">top</a> </div> </div> <div class="wrap"> <div class="triangle2"></div> <div class="text"> <a href="#">top</a> </div> </div> <div class="wrap"> <div class="triangle1"></div> <div class="text"> <a href="#">top</a> </div> </div> <div class="wrap"> <div class="triangle2"></div> <div class="text"> <a href="#">top</a> </div> </div> <div class="wrap"> <div class="triangle1"></div> <div class="text"> <a href="#">top</a> </div> </div> <div class="wrap"> <div class="triangle2"></div> <div class="text"> <a href="#">top</a> </div> </div> </div> </body> </html>

よろしくお願いします。

良い質問の評価を上げる

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

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

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

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

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

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

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

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

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

kei344
kei344

2019/04/03 05:15

まだ質問が「受付中」になっていますが、「ベストアンサー」を選び「解決済」にされてはいかがでしょうか。

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

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

CSS

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