まず、参考にしたサイトの動きを観察してみます。
ページ開いた直後は下記のようにと表示されていて各要素は親要素の25%の幅になってます。
[画像1][テキスト1][画像2][画像3]
[画像2]にmouseenterすると下記のように変化します。
[画像1][画像2][テキスト2][画像3]
[画像3]にmouseenterすると下記のように変化します。
[画像1][画像2][画像3][テキスト3]
変化するのはmouseenterの時のみで、mouseleaveの時は変化はありません。
ということから、jsのイベントはmouseenterのみでいいと分かります。
デベロッパーツールでHTMLの変化を見てみると、
mouseenterの時に、ホバーした要素にshow_infoクラスが追加されて、それ以外の要素からshow_infoクラスされています。
上記のことからコードは下記のようにすればいいでしょう。
js
1document.addEventListener("DOMContentLoaded", function () {2 document.querySelector(".test-red").classList.add("test-green");3 const tests = document.querySelectorAll(".test-red");4 tests.forEach(function (test) {5 test.addEventListener("mouseenter", function () {6 tests.forEach(function (test) {7 test.classList.remove("test-green")8 });9 test.classList.add("test-green");10 });11 });12});
あとは、CSSでレイアウトを決めればいいです。
解説するとながくなるので、サンプルを置いておきますので研究してみてください。
CodePenサンプル
0 コメント