フォーラムへの返信
3件の投稿を表示中 – 1 – 3件目 (全3件中)
-
ありがとうございます！
aタグでラップしたいのは
PC のブラウザでリンク上にマウスホバーした時に左下にURLが表示さるといいなというところです。
これを実現したいというのが一番大きいです。
全然詳しくないのですがaタグでラップすることで明示的にリンクになるのでアクセシビリティ的にもいいのかも？って勝手に思っています。間違っていたらすいません。
要素の中に別のリンクが指定されていた場合、そこだけ別のリンクになるのにも違和感を感じてしまいます。「ホバーしたことにする」
これしたいですよね。。
できないことがわかったので要素全体をリンクにするときはJavaScript で実装することが多いです(； ･`ω･´)
JavaScript の書き方にもよるのですが、不要なaタグを削除したり1つ目のリンクで上書きするということが多いです。ちょっと書き方雑なのですが、最近はこんな感じで
.linkboxというclass をつけることで実装しました。
aタグの中にaタグが入ったままになるので一般的なものにするなら削除する形に修正が必要だと思います。document.addEventListener(‘DOMContentLoaded', function () { const linkBoxes = document.querySelectorAll(‘.linkbox'); linkBoxes.forEach(linkBox => { // .linkbox 内のすべての <a> タグを取得 const aTags = linkBox.querySelectorAll(‘a'); if (aTags.length === 0) return; // <a> タグがなければスキップ // 最初の <a> タグの href を取得 const firstATag = aTags[0]; const href = firstATag.getAttribute(‘href'); if (!href) return; // href がなければスキップ // 2つ目以降の <a> タグの href を上書き for (let i = 1; i < aTags.length; i++) { aTags[i].setAttribute(‘href', href); } // <a> タグで .linkbox をラップ const wrapperATag = document.createElement(‘a'); wrapperATag.setAttribute(‘href', href); // 元の target 属性を保持 const target = firstATag.getAttribute(‘target'); if (target) { wrapperATag.setAttribute(‘target', target); } // ラップする <a> タグにスタイルを設定 wrapperATag.style.textDecoration = ‘none'; // アンダーラインを消す wrapperATag.style.color = ‘inherit'; // テキストの色を親要素から継承 // .linkbox の親要素にラップを追加 const parent = linkBox.parentNode; parent.replaceChild(wrapperATag, linkBox); wrapperATag.appendChild(linkBox); }); });わからんことばかりなので間違っていたらすいません(´；ω；｀)
いいねをした人：
3件の投稿を表示中 – 1 – 3件目 (全3件中)
