WEBLIC LLC

ブログ

子要素にaタグを含む親要素にhover処理をする

Web制作

2016年12月14日

f1f1f1

現状のCSSではaタグを持つ親要素のdivにスタイルを定義することができません。
今回は同じ要素のボックス(div)が複数並び、あるボックスでは子要素にaタグが無し、あるボックスでは子要素にaタグ有りの場合、
aタグの有りのdivに対してhover設定する方法をご紹介。

結論から言うと、jQueryを使って、aタグが含まれるdivに対してcalssを付与します。
例:divの中にaタグがある場合classでlinkを付与。

jsは下記のように記述します。
[js]
$(function(){
$("div:has(a)").addClass("link");
});
[/js]

次にcssは下記のように記述します。
[css]
.link:hover {
background: ;
transition: All 0.5s ease;
}
[/css]

なぜ今回このような対応が必要になったかと言うと、スマホでの閲覧が増えたことにより、クリック領域を広くする必要がありました。
今まではテキストや画像に対してリンクを設置すればよかったが、今時ではaタグを含む、親要素に対してクリック領域を設定することが主流です。

そこで、問題になったのが、cssだけの設定だと、aタグが無いdivに対してもhoverのアクションが発生し、どれにリンクがあってどれにリンクが無いのか分かりづらいです。

今回の対策により、解決することができました。

また、:has(selector)を使えば、サムネイルなどの画像が有るパターン、無いパターンでスタイルの調整も簡単にできますね。

関連記事

Web制作

VirtualBoxでGuest Addsinionsをインストールしても画面サイズが変わらない場合の対処法

弊社の制作環境はMacで、制作したサイトのIEチェックはVMwareもしくはVirtualBoxにイ...

2017年3月8日

Web制作

ファーストビューに動画を!メリットと注意点の解説

ウェブサイトにおいて、訪問者の最初の印象を決定づけるファーストビューは非常に重要です。静的な画像やテ...

2024年3月7日

Web制作

メイリオフォントはCSSでイタリックが効かない!

先日ある案件でデバイスフォントを斜体にする必要がありました。普段は何も気にせずCSSでイタリックを設...

2017年4月3日

Web制作

Dreamweaver CC2017を試してみる

先日アップデートされたAdobe Dreamweaver CC2017を試してみました。まず見違える...

2016年11月14日

Web制作

低予算でのWordPress運用ガイド!子テーマの重要性を解説

ホームページの制作に予算制限がある中で、自社のスタッフがWordPressを使ってサイトを構築するこ...

2024年7月30日

  • カテゴリー

  • 本日、 2人が閲覧しました

    RELATED SITES

    関連サイト

    • SAKAMOTO Blog
    Designed by WEBLIC合同会社