前提・実現したいこと
下記、work-font要素内にあるアンカー<a>タグをクリックして別HTMLページに飛ぶようにしたいがクリックすら出来ない。
<div class="work-font font-title"> - List of works - <a href="#" class="works-link"><i class="work-arrow fas fa-chevron-right"></i></a> </div>どなたかご教示頂けませんでしょうか。
該当のソースコード
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="UTF-8" /> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> 6 <link 7 href="https://fonts.googleapis.com/css?family=Caveat" 8 rel="stylesheet" 9 /> 10 <link 11 href="https://use.fontawesome.com/releases/v5.10.2/css/all.css" 12 rel="stylesheet" 13 /> 14 <link 15 href="https://fonts.googleapis.com/css?family=Homemade+Apple" 16 rel="stylesheet" 17 /> 18 <link 19 href="https://fonts.googleapis.com/css?family=Roboto+Condensed:700" 20 rel="stylesheet" 21 /> 22 <link rel="stylesheet" href="css/portfolio.css" /> 23 <link rel="stylesheet" href="css/slick.css" /> 24 <link rel="stylesheet" href="css/slick-theme.css" /> 25 <title>TOMOYA TANI PORTFOLIO</title> 26 </head> 27 <body> 28 <h2 class="works-title fade-in-bottom flex font-title animate" id="works">WORKS</h2> 29 <div class="works-inner flex"> 30 <div class="works-inner-items flex"> 31 <div class="slider flex"> 32 <div><img src="./img/Namba.jpg" alt="Namba" /></div> 33 <div><img src="./img/Shibuya.jpg" alt="Shibuya" /></div> 34 <div><img src="./img/Yokohama.jpg" alt="Yokohama" /></div> 35 <div><img src="./img/Kyoto.jpg" alt="Kyoto" /></div> 36 <div><img src="./img/Fukuoka.jpg" alt="Fukuoka" /></div> 37 </div> 38 <div class="work-font font-title"> 39 - List of works - <a href="#" class="works-link"><i class="work-arrow fas fa-chevron-right"></i></a> 40 </div> 41 </div> 42 </div> 43 <script src="https://unpkg.com/scrollreveal"></script> 44 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 45 <script src="js/slick.min.js"></script> 46 <script src="js/portfolio.js"></script> 47 </body> 48 <footer> 49 </footer> 50</html> 51
CSS
1/* <====== 全体共通 ======> */ 2 3* { 4 margin: 0; 5 padding: 0; 6 box-sizing: border-box; 7} 8 9html { 10 scroll-behavior: smooth; 11 font-size: 16px; 12} 13 14p { 15 line-height: 2rem; 16 font-size: 0.875rem; 17} 18 19ul li { 20 list-style: none; 21 padding: 0.5rem; 22} 23 24a { 25 text-decoration: none; 26 color: #fff; 27} 28 29h2 { 30 font-size: 2rem; 31} 32 33.flex { 34 display: flex; 35 justify-content: center; 36 align-items: center; 37} 38 39.font-title { 40 font-family: "Caveat", cursive; 41} 42 43 44/* <====== works ======> */ 45h2#works { 46 padding-top: 12rem; 47 margin-top: -8rem; 48} 49 50.works-inner { 51 width: 100%; 52 height: 45rem; 53 -webkit-box-orient: vertical; 54 -webkit-box-direction: normal; 55 -ms-flex-direction: column; 56 flex-direction: column; 57} 58 59.works-inner .works-inner-items { 60 width: 90%; 61 height: 40rem; 62 margin-top: 8rem; 63 position: relative; 64 z-index: -1; 65 -webkit-box-orient: vertical; 66 -webkit-box-direction: normal; 67 -ms-flex-direction: column; 68 flex-direction: column; 69} 70 71.works-inner .works-inner-items::after { 72 width: 100%; 73 height: 40rem; 74 content: ""; 75 position: absolute; 76 left: 0rem; 77 top: 1rem; 78 -webkit-transform: skewY(-5deg); 79 transform: skewY(-5deg); 80 -webkit-transform-origin: bottom left; 81 transform-origin: bottom left; 82 z-index: -1; 83 background: black; 84} 85 86.works-inner .works-inner-items .work-font { 87 font-size: 1.5rem; 88 color: white; 89} 90 91.works-inner .works-inner-items .work-font a { 92 position: relative; 93 z-index: 10000; 94} 95 96.works-inner .works-inner-items .work-font .work-arrow { 97 color: white; 98 padding: 1rem; 99} 100 101.work-hover:hover { 102 cursor: pointer; 103} 104 105}
試したこと
1.work-inner要素以外の場所で試してみるとクリックすることが出来る。ポインターも正常に出ます。
2.背景に平行四辺形のBOXを作っているのでそれが被さってると考えた為(position:absoluteの指示とz-index:-1の指示がある為)
position:relativeを記述してみましたが変化なし。
回答2件
あなたの回答
tips
プレビュー