画像リンクする時としない時があるエラーを修正したい

Question

実現したいこと

リンクが不安定な状態。エラーぜず、clickで指定のページへ移動できるようにしたい。

発生している問題・分からないこと

sliderの画像リンクをクリックしたときに、リンクでページ移動出来る時と、出来ずに画面再読み込みになってしまう時がある。

エラーメッセージ

jクエリのバージョンを変える前は、ファイルにアクセスできませんでしたというエラーが出た。
現在はありません。

該当のソースコード

こちらにコードを書きました。
https://jsfiddle.net/30v56qye/10/

<div class="top_slide">
    <div class="slide">
<li>
                <a href="bus_toppage.html" alt="slide_img"><img src="img/2357486_kankouao_1400.png" alt="Slide 1" /><div class="text-overlay">別ページへリンクします</div></a>
            </li>            
            <li>
                <a href="bus_toppage.html" alt="slide_img"><img src="img/1679585_1400.png" alt="Slide 2" /><div class="text-overlay">別ページへリンクします</div></a>
            </li>
            <li>
                <a href="bus_toppage.html" alt="slide_img"><img src="img/1339937_1400_600.jpg" alt="Slide 3" /><div class="text-overlay">別ページへリンクします</div></a>
            </li>

上記の3画像は、bus_toppage.htmlへのリンクをする時と、しないときがあります。しないときは、画面再読み込み。
i以下、残りの2画像は別なページへのリンクは行いません。
将来新しページが出来た時に、リンクするかもしれません。
            <li>
                <a href="index.html" alt="slide_img"><img src="img/625842_1400.jpg" alt="Slide 4" /></a>
            </li>
            <li>
                <a href="index.html" alt="slide_img"><img src="img/3025924_1400.jpg" alt="Slide 5" /></a>
            </li>
</div>
</div>

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

jクエリのバージョンが古いことがリンクに影響している疑いを考えて、新しいバージョンにした。
z-indexを100単位で大きくした。しかし、リンク出来る時と出来ないときがあるエラーは相変わらず。

補足

特になし

Comments

[Lhankor_Mhy]

jsFiddleで10回ほど試行しましたが、問題が再現しませんでした。
タイミングとかコツとかありますか？

[naaS]

jsFiddleだと、十分に再現できていないのかもしれません。ネット上にclickテスト用のファイルをアップして操作できるようにしたいと思います。少しお待ちください。

[Lhankor_Mhy]

あー、ローカルにコピペしたらなんとなくわかりました。

[naaS]

レイアウトは一部不備がありますが、リンクが効く、効かないの状態は再現できています。
http://kitasoubus.cheap.jp/test/link_test.html
これで見ていただければと思います。

[Lhankor_Mhy]

すみません、すでに回答しています。

[naaS]

むしろそれだと逆にリンクしないとなりますので…違うような気がします。

[Lhankor_Mhy]

そうなんですね。残念です。

[Lhankor_Mhy]

『動的に動く、画像の上にfont、レイヤー』というのは別の話ですよね？　別の問題については別の質問を立てることをお勧めします。

もしリンクが押せない問題と関連があるのであれば、関連がわかるように書かれることをお勧めします。

[Lhankor_Mhy]

コメントなくなった……？

[naaS]

先ほど、他の方のコメントに対する返事を間違ってこの欄に投稿したので、削除させていただきました。すみません。動画を撮ってお見せできればと思ったのですが、アップする方法が有料だったり、お試し期間が限られていたり、どうしたものかと考え込んでいます。

[Lhankor_Mhy]

そうなんですね。
KazuhiroHatano さんのご回答の通り、スタッキングコンテキストの問題ですので、回答の通りで解決できると思いますので頑張ってください。
また、ご提示いただいているページをダウンロードし私の回答のコードを追加したものでも、当方の環境では上手く動作しました。
いろいろお試しになるのがいいかと思いますよ。

Answer 1

text-overlayのみがリンク、周りの背景画像が非linkになっていて、決してランダムでリンク、非linkが決まるわけじゃないことに気が付きました。
このコードでは修正が出来ないと思ったので、一度はオーバーレイ以外で画像リンクを書く方法を調べて、ネットのあるサイトでは、静止画像があるコンテンツにposition: relative;、文字を表示させるpタグをposition: absoluteにしていました。
その応用でli要素をposition: relative;　aをposition: absoluteにしたら、画像全体のリンクが可能にになりました。
偶然にもネット上にヒントがあったので、何とかできました。
アドバイスをして下さった方々、ありがとうございました。

Answer 2

aのdisplayをblockにしとかないとz-indexとかpositionとか機能しないです。
できればposition:absoluteにしているliの方で、z-indexの面倒を見た方がいいかと思います。
liにz-indexやtransformが指定された時に、aのz-indexがliの中で閉じ込められて、リンクが他のスライドより上に行かなくなります。

Comments

[naaS]

コメントありがとうございます。
自分で書き直してみましたが、リンクする時としないときがあり、あまり変わりません。
/*ズームアップslider*/
.slide {
display: flex;
/*overflow: hidden;*/
margin-top: 0;
width: 100%;

}

.slide ul {
list-style-type: none;
margin: 0;
padding: 0;
aspect-ratio: 2.3 / 1; /* 画像のアスペクト比に合わせる */
width: 100%;
position: relative;
}

.slide li {
position: absolute;
margin-right: 0px;

}

.slide li .active {
opacity: 1;

}

.slide li a {
opacity: 0;
transform: scale(1);
transition: opacity 1s ease-in-out;

}
.slide li.active a {
opacity: 1;
display: block;
}

.slide li img {
width: 100%;
object-fit: cover;
transform: scale(1);
transition: transform 6s ease-in-out;
}

.slide li a.active img {
transform: scale(1.05);
display: block;
}

.text-overlay {
position: absolute;
bottom: 40%;
left: 50%;
transform: translate(-50%, -50%);
/*top: 50%;5/15aiの指示で不要*/
color: white;
font-size: 24px;
text-align: center; /* テキストのセンター配置 */
max-width: 90%; /*5/15aiの指示で追記 テキストの最大幅を設定してはみ出しを防止 */
white-space: nowrap; /* 必要に応じてテキストの改行を防止 */
letter-spacing: 0.4em;
line-height: 2.3em;
font-family: serif;
font-weight: bold;
z-index: 100;
}
もしかして、まちがっているかもしれません。

[naaS]

ギブアップです。activeにdisplay:block;やz-indexを付けられるか混乱するので、自分には出来ないと感じました。
画像が迫ってくる機能も損なわれてしまいました。
いじる前のコードに戻しても、
文字の上をクリック。かろうじてリンクするかしないか。
周りの画像をクリック、リンクしない。
いじると、画像の切り替わりで、文字の位置がずれて、カクカク不自然な挙動になる。
このスライドのリンクはこれ以上修正は困難と感じました。

[KazuhiroHatano]

z-indexを効かせるにはposition:relartive;にすることも必要です。
しかしまずは、混乱してしまうようであればなおさら、liのほうにactiveクラスを付与する形で組み直したほうが良いかと思います。いろいろ考え直し・書き直しにはなりますが、少なくともliの中で重なり順が閉じ込められてしまっているからうまくいっていないという可能性を消せます。
あと、類似のものを作ったさいの経験からのアドバイスとして、現在アクティブなスライドの前・後のスライドにprev・nextのクラスを付与するようにしておくといいです。最初と最後のスライドのところだけ突然消える・突然現れるみたいな感じになってしまったときの対処に必要になってきます。

[naaS]

ありがとうございます。＞アクティブなスライドの前・後のスライドにprev・nextのクラスを付与
動的なjsにもprev・nextの動作を追記？でしょうか。これは試してみたいと思います。

Answer 3

こうするとどうですか？

.slide li {
    position: absolute;
    margin-right: 0px;
    pointer-events: none; /* これ */
}

.slide li .active {
    opacity: 1;
    z-index: 100;
    pointer-events: auto; /* これ */
}