リンクタグが飛ばない
a hrefタグが、cssが原因でリンク先に飛びません。
コーディング初心者なので、色々試してみるも、改善せず。
原因わかる方いましたら、教えていただけると幸いです。
発生している問題・エラーメッセージ
a href指定しているリンク先に飛ばない
該当のソースコード
HTML
1<li class="box-1"> 2 <div class="btn btn-one"> 3 <span><a href="about.html">ABOUT</a></span> 4 </div> 5</li>
css
1a{ 2 color: black; 3 text-decoration: none; 4} 5 6 7.btn { 8 line-height: 50px; 9 height: 50px; 10 text-align: center; 11 width: 100px; 12 cursor: pointer; 13} 14 15.btn-one { 16 color: #333; 17 transition: all 0.3s; 18 position: relative; 19} 20.btn-one span { 21 transition: all 0.3s; 22} 23 24.btn-one span a{ 25 position: relative; 26} 27 28.btn-one::before { 29 content: ''; 30 position: absolute; 31 bottom: 0; 32 left: 0; 33 width: 100%; 34 height: 100%; 35 z-index: 1; 36 opacity: 0; 37 transition: all 0.3s; 38 border-top-width: 1px; 39 border-bottom-width: 1px; 40 border-top-style: solid; 41 border-bottom-style: solid; 42 border-top-color: rgba(255,255,255,0.5); 43 border-bottom-color: rgba(255,255,255,0.5); 44 transform: scale(0.1, 1); 45} 46.btn-one:hover span { 47 letter-spacing: 2px; 48} 49.btn-one:hover::before { 50 opacity: 1; 51 transform: scale(1, 1); 52} 53.btn-one::after { 54 content: ''; 55 position: absolute; 56 bottom: 0; 57 left: 0; 58 width: 100%; 59 height: 100%; 60 z-index: 1; 61 transition: all 0.3s; 62 background-color: rgba(255,255,255,0.1); 63} 64.btn-one:hover::after { 65 opacity: 0; 66 transform: scale(0.1, 1); 67}
試したこと
positionタグが悪さしているのかなと思い、色々いじってみましたが解決せず。
divで囲っているからかと思いましたが、その他のdivで囲ったリンクタグが問題なく作動するので
btnまたはbtn-oneタグが悪さしていると思うのですが、初心者なもので、原因がわかりません。
補足情報(FW/ツールのバージョンなど)
回答3件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。