aタグが一部反応しない現象
<nav><ul><li>内の<a>タグが一番始めのだけ反応しません。 いろいろ調べましたが、どうやらheader内で使用したjQueryが問題を起こしているようです。*<header>直後の<div #demo-1>を削除するとうまく反応します。
発生している問題・エラーメッセージ
<nav><ul><li>内の<a>CONCPT</a>が右半分しか反応してくれない。
該当のソースコード
HTML
1<header> 2<div id="demo-1" data-zs-src='["img/main.png", "img/main-2.jpg", "img/main-3.jpg"]' data-zs-speed="8000" data-zs-switchSpeed="800" data-zs-interval="4500" data-zs-overlay="dots"> 3 4 <div id="g-nav"> 5 <div class="nav-logo"><p>LOGO</p></div> 6 <nav> 7 <ul> 8 <li><a href="#">CONCEPT</a></li> 9 <li><a href="#">MENU</a></li> 10 <li><a href="#">ACCESS</a></li> 11 </ul> 12 </nav> 13 <img src="img/nav-tel.png" alt="" class="tel"> 14 </div> 15 16 17 <div class="main-logo"> 18 <img src="img/logo.png" alt=""> 19 </div> 20 21</div> 22 23 24 25</header>
CSS
1body{ 2 color: #fff; 3} 4 5header{ 6 width:100%; 7 height: 100vh; 8 position: relative; 9} 10 11/*main 切り替え*/ 12#demo-1{ 13 overflow: hidden; 14 width: 100%; 15 height: 100vh; 16 background-color: #999; 17} 18/*main 切り替え終了*/ 19 20#g-nav{ 21 position: relative; 22 z-index: 1; 23} 24 25.nav-logo{ 26 font-size:50px; 27 margin-left:48px; 28 width:200px; 29 background-color:#C33E40; 30 position:absolute; 31 left:51px; 32 top:10px; 33 } 34 35nav{ 36 height: 70px; 37 display: flex; 38 justify-content:space-between; 39 position:absolute; 40 right:200px; 41 top:36px; 42 padding-left: 20px; 43} 44 45 46nav ul{ 47 width:430px; 48 display:flex; 49} 50 51nav ul li{ 52 font-size: 23px; 53 margin-right: 40px; 54} 55 56nav ul li a{ 57 color: #fff; 58 text-decoration: none; 59} 60 61
jQuery
1window.addEventListener('load', function () { 2 sliderStart(); 3}); 4 5function sliderStart() { 6 7 const slide = document.getElementById('slide_wrapp'); //スライダー親 8 const slideItem = slide.querySelectorAll('.slide_item'); //スライド要素 9 const totalNum = slideItem.length - 1; //スライドの枚数を取得 10 const FadeTime = 2000; //フェードインの時間 11 const IntarvalTime = 5000; //クロスフェードさせるまでの間隔 12 let actNum = 0; //現在アクティブな番号 13 let nowSlide; //現在表示中のスライド 14 let NextSlide; //次に表示するスライド 15 16 // スライドの1枚目をフェードイン 17 slideItem[0].classList.add('show_', 'zoom_'); 18 19 // 処理を繰り返す 20 setInterval(() => { 21 if (actNum < totalNum) { 22 23 let nowSlide = slideItem[actNum]; 24 let NextSlide = slideItem[++actNum]; 25 26 //.show_削除でフェードアウト 27 nowSlide.classList.remove('show_'); 28 // と同時に、次のスライドがズームしながらフェードインする 29 NextSlide.classList.add('show_', 'zoom_'); 30 //フェードアウト完了後、.zoom_削除 31 setTimeout(() => { 32 nowSlide.classList.remove('zoom_'); 33 }, FadeTime); 34 35 } else { 36 37 let nowSlide = slideItem[actNum]; 38 let NextSlide = slideItem[actNum = 0]; 39 40 //.show_削除でフェードアウト 41 nowSlide.classList.remove('show_'); 42 // と同時に、次のスライドがズームしながらフェードインする 43 NextSlide.classList.add('show_', 'zoom_'); 44 //フェードアウト完了後、.zoom_削除 45 setTimeout(() => { 46 nowSlide.classList.remove('zoom_'); 47 }, FadeTime); 48 49 }; 50 }, IntarvalTime); 51 52}
試したこと
<nav>はheaderに対してposition:relative; を使用しており、right値を下げると反応する幅は広がることから 何かしらが原因で<nav>内の反応エリアが限られてしまっているようですが原因がわかりません。補足情報(FW/ツールのバージョンなど)
コーディング歴も勉強中の身でteratail初の投稿になります。
投稿内容に不備・失礼などありましたらご指摘いただけると幸いです。
「CONCEPT」の最初の「C」で反応していますよ。
jQueryが提示されていません。また、#slide_wrappなどが提示されていません。https://jsfiddle.net/f9tm5eqc/
Chromeは使っているでしょうか? 反応しないということろで右クリックして「検証」を選ぶと何が選ばれますか?
![guest](/img/icon/icnUserSample.jpg)
回答1件
あなたの回答
tips
プレビュー