Q&A
前提・実現したいこと
ナビゲーションメニューを作成してます。
テキストにカーソルを当てると文字が変わり、クリックすることでリンク先に移動する機能を作成していますが、
文字は変わるものの該当のリンク先に移動できません。（ポインタも手のマークにならず、矢印のままです）
初歩的な質問かと思いますが、お願いします。
該当のソースコード
HTML
1<div class="header"> 2 <div class="headerNav"> 3 <ul> 4 <li class="menuBase menuList"><a href="#link1"><div>Link1</div><div>リンク１</div></a></li> 5 <li class="menuBase menuList"><a href="#link2"><div>Link2</div><div>リンク２</div></a></li> 6 <li class="menuBase menuList"><a href="#link3"><div>Link3</div><div>リンク３</div></a></li> 7 </ul> 8 </div> 9</div> 10
CSS
1.headerNav{ 2 position: relative; 3 width: 70%; 4 margin: -15px auto 0; 5 padding-bottom: 0px; 6 height: 20px; 7 z-index: 100; 8 transition: height 0.1s; 9} 10 11.headerNav ul{ 12 display: flex; 13 list-style: none; 14 overflow: hidden; 15 text-align: center; 16} 17li.menuBase { 18 margin: 0; 19 border: 0; 20 position: relative; 21 width: 25%; 22 height: 20px; 23 list-style: none; 24 box-sizing: border-box; 25 -webkit-box-sizing: border-box; 26 -moz-box-sizing: border-box; 27 -webkit-user-select: none; 28 cursor: default; 29} 30 31li.menuList { 32 perspective: 500px; 33 -webkit-perspective: 500px; 34 -moz-perspective: 500px; 35 transform-style: preserve-3d; 36 -webkit-transform-style: preserve-3d; 37} 38li.menuList div { 39 position: absolute; 40 width: 100%; 41 height: 0%; 42 padding: 0px; 43 pointer-events: none; 44 box-sizing: border-box; 45 -webkit-box-sizing: border-box; 46 -moz-box-sizing: border-box; 47} 48 49li.menuList div:nth-child(1) { 50 color: #ffffff; 51 background-color: #3a3a3aff; 52 font-size: 12px; 53 transform: translateZ(0px); 54 -webkit-transform: translateZ(0px); 55 -moz-transform: translateZ(0px); 56 transition: all 0.2s ease; 57 -webkit-transition: all 0.2s ease; 58 -moz-transition: all 0.2s ease; 59 transform-origin: 50% 50% -25px; 60 -webkit-transform-origin: 50% 50% -25px; 61 -moz-transform-origin: 50% 50% -25px; 62} 63 64li.menuList div:nth-child(2) { 65 color: #ffffff; 66 background-color: #3a3a3aff; 67 font-size: 12px; 68 transform: rotateX(90deg); 69 -webkit-transform: rotateX(90deg); 70 -moz-transform: rotateX(90deg); 71 transition: all 0.2s ease 0.05s; 72 -webkit-transition: all 0.2s ease 0.05s; 73 -moz-transition: all 0.2s ease 0.05s; 74 transform-origin: 50% 50% -25px; 75 -webkit-transform-origin: 50% 50% -25px; 76 -moz-transform-origin: 50% 50% -25px; 77} 78 79li.menuList:hover div:nth-child(1) { 80 color: #3a3a3aff; 81 background-color: #3a3a3aff; 82 transition: all 0.2s ease; 83 -webkit-transition: all 0.2s ease; 84 -moz-transition: all 0.2s ease; 85 transform: translateZ(-200px); 86 -webkit-transform: translateZ(-200px); 87 -moz-transform: translateZ(-200px); 88 89} 90 91li.menuList:hover div:nth-child(2) { 92 color: #ffffff; 93 transition: all 0.2s ease 0.05s; 94 -webkit-transition: all 0.2s ease 0.05s; 95 -moz-transition: all 0.2s ease 0.05s; 96 transform: rotateX(0deg); 97 -webkit-transform: rotateX(0deg); 98 -moz-transform: rotateX(0deg); 99}
試したこと
過去に同様事象の記事を参考に試してみましたが、ポインタが手のマークに変わらず、矢印のままでした。
＜試したこと＞
a { position: relative; } の挿入
補足情報（FW/ツールのバージョンなど）
ここにより詳細な情報を記載してください。
回答1件
0
ベストアンサー
指にするのって cursor: pointer; ですけどそこらへんは理解してますか？
投稿2019/07/24 03:02
総合スコア2341
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/07/24 03:17
2019/07/24 04:06
2019/07/24 08:10
2019/07/24 08:11