親要素のホバーで子要素のCSSを動的に変更！jQuery & CSS3テクニック
jQuery を使って親要素のホバー時に子要素の CSS を変更する方法
必要なもの
- jQuery ライブラリ
- 基本的な CSS の知識
手順
- HTML 構造を構築する
まず、親要素と子要素を含む HTML 構造を構築する必要があります。以下は、簡単な例です。
<div class="parent">
<p class="child">子要素テキスト</p>
</div>
- 親要素にホバーイベントを設定する
次に、jQuery を使って親要素にホバーイベントを設定します。このイベントは、カーソルが親要素の上に移動したときに発生します。
$(document).ready(function() {
$(".parent").hover(function() {
// 親要素にカーソルが当たったときの処理
}, function() {
// 親要素からカーソルが外れたときの処理
});
});
- 子要素の CSS を変更する
親要素にカーソルが当たったときに、子要素の CSS を変更する処理を記述します。以下は、子要素の背景色を青色に変更する例です。
$(".parent").hover(function() {
$(this).find(".child").css("background-color", "blue");
}, function() {
$(this).find(".child").css("background-color", "");
});
このコードは、$(this) セレクタを使用して現在の親要素を取得し、.find(".child") メソッドを使用してその子要素を選択します。そして、css() メソッドを使用して、子要素の background-color プロパティを "blue" に設定します。
補足
- 上記の例では、子要素の背景色を変更していますが、他の CSS プロパティも同様に変更することができます。
- 複数の子要素に対して異なる CSS 変更を適用したい場合は、
ifステートメントやswitchステートメントを使用して条件分岐を行うことができます。 - より複雑なアニメーションやエフェクトを作成したい場合は、jQuery UI やその他のライブラリを使用することができます。
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>親要素ホバー</title>
<style>
.content {
width: 300px;
height: 200px;
background-image: url("image.jpg");
background-size: cover;
position: relative;
margin: 20px auto;
}
.content img {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.content p {
position: absolute;
bottom: 20px;
left: 20px;
color: white;
font-size: 20px;
}
.button {
display: block;
width: 100px;
height: 40px;
margin: 20px auto;
background-color: #ccc;
text-align: center;
line-height: 40px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="content">
<img src="#">
<p>コンテンツ</p>
</div>
<button class="button">ボタン</button>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$(".content").hover(function() {
$(this).find("img").css("filter", "blur(5px)");
$(this).find("p").css("color", "blue");
}, function() {
$(this).find("img").css("filter", "none");
$(this).find("p").css("color", "white");
});
});
</script>
</body>
</html>
説明
- HTML 構造:
contentクラス: 画像とテキストを含むコンテンツ要素buttonクラス: ボタン要素
- CSS:
.content: コンテンツ要素のスタイルを設定background-image: 背景画像position: 配置margin: マージン
.content img: コンテンツ要素内の画像のスタイルを設定width: 幅height: 高さtop: 上部位置left: 左部位置
.content p: コンテンツ要素内のテキストのスタイルを設定bottom: 下部位置color: 色font-size: フォントサイズ
.button: ボタン要素のスタイルを設定display: 表示方法text-align: テキスト配置line-height: 行高cursor: カーソル
- JavaScript:
親要素のホバー時に子要素の CSS を変更するその他の方法
CSS のみで実現する
以下の CSS コードを用いることで、親要素のホバー時に子要素のスタイルを変更することができます。
.parent:hover .child {
background-color: blue;
}
このコードは、.parent クラスを持つ要素がホバー状態になったとき、その内部にある .child クラスを持つ要素の background-color プロパティを "blue" に設定します。
利点
- jQuery を必要としないため、コードが簡潔になる。
- パフォーマンスが向上する可能性がある。
欠点
- 疑似クラスを使用するため、すべてのブラウザでサポートされているわけではない。
- 子要素を直接指定する必要があるため、柔軟性が低い。
CSS カスタムプロパティと JavaScript で実現する
CSS
.parent {
--child-background-color: #fff; /* デフォルトの子要素背景色 */
}
.parent:hover {
--child-background-color: blue; /* ホバー時の子要素背景色 */
}
.child {
background-color: var(--child-background-color);
}
JavaScript
document.addEventListener('DOMContentLoaded', function() {
const parents = document.querySelectorAll('.parent');
for (const parent of parents) {
parent.addEventListener('mouseenter', function() {
this.style.setProperty('--child-background-color', 'blue');
});
parent.addEventListener('mouseleave', function() {
this.style.setProperty('--child-background-color', '#fff');
});
}
});
このコードは、--child-background-color という CSS カスタムプロパティを定義し、デフォルト値とホバー時の値を設定します。そして、.child クラスを持つ要素の background-color プロパティをカスタムプロパティにバインドします。JavaScript コードでは、.parent クラスを持つ要素に対して mouseenter イベントと mouseleave イベントを付与し、イベント発生時にカスタムプロパティの値を変更することで、子要素の背景色を変更します。
- カスタムプロパティを使用することで、柔軟性と再利用性を高めることができる。
- jQuery を使用する方法よりもコードが複雑になる。
- JavaScript を必要とするため、パフォーマンスが低下する可能性がある。
親要素のホバー時に子要素の CSS を変更するには、jQuery を使用する以外にも、CSS のみで実現する方法と、CSS カスタムプロパティと JavaScript を組み合わせる方法があります。それぞれの方法には利点と欠点があるため、状況に合わせて最適な方法を選択してください。
jquery css jquery-selectors
