
テキストにマウスhoverすると、画像が切り替わるスライドの作り方です。  
完成形は[こちら](#%E3%83%87%E3%83%A2)です。

## 実現したいこと

- テキストにマウスhoverすると画像が切り替わる

## 1. htmlを用意する

切り替わる画像エリア `slide-image` と、マウスhoverするテキストエリア `slide-text` の2つを用意します。

```html
<div class="slide-wrap">
  <ul class="slide-image">
    <li class="slide-image__item">
      <img src="https://source.unsplash.com/rkaahInFlBg/640x360" alt="" />
    </li>
    <li class="slide-image__item">
      <img src="https://source.unsplash.com/3esjG-nlgyk/640x360" alt="" />
    </li>
    <li class="slide-image__item">
      <img src="https://source.unsplash.com/9HnSQn4TVEg/640x360" alt="" />
    </li>
  </ul>
  <div class="slide-text">
    <p class="slide-text__text">
      <span>Iron Man</span>
    </p>
    <p class="slide-text__text">
      <span>Thor</span>
    </p>
    <p class="slide-text__text">
      <span>Captain America</span>
    </p>
  </div>
</div>
```

## 2. cssでスタイルを設定する

画像エリアはマウスhoverで切り替わるようにするため、1枚だけ見える状態にします。  
1で作成したhtmlの1つ目の画像に `current` というclassを追加します。

```html
<li class="slide-image__item current">
  <img src="https://source.unsplash.com/rkaahInFlBg/640x360" alt="" />
</li>
```

画像群は ` display: grid;` で重なるようにします。

後ほどJavaScriptでマウスhoverと連動して `current` の付け替えをしますが、
その際に `current` の場合に `opacity: 1;` および `visibility: visible;` 、
そうでないときは `opacity: 0;` および `visibility: hidden;` になるように設定します。
`transition` で切り替わるときの状態の変化も設定します。

```css
.slide-image {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  overflow: hidden;

  &__item {
    grid-column: 1 / -1;
    grid-row: 1 / -1;
    opacity: 0;
    visibility: hidden;
    transition:
      opacity 0.45s cubic-bezier(0.65, 0, 0.35, 1),
      visibility 0.45s cubic-bezier(0.65, 0, 0.35, 1);

    &.current {
      opacity: 1;
      visibility: visible;
      transition:
        opacity 0.45s cubic-bezier(0.65, 0, 0.35, 1),
        visibility 0.45s cubic-bezier(0.65, 0, 0.35, 1);
    }
  }
}
```

## 3. JavaScriptでclassの付け替えをする

テキストにマウスhoverした場合にどの画像を `current` にするか、  
カスタムデータ属性の `data-*` と `id` を使用して対応するようにします。

また、JavaScriptから操作する時のために、  
画像に `js-target` テキストに `js-trigger` とそれぞれclassを追加します。

```html
<div class="slide-wrap">
  <ul class="slide-image">
    <li id="item-01" class="slide-image__item js-target current">
      <img src="https://source.unsplash.com/rkaahInFlBg/640x360" alt="" />
    </li>
    <li id="item-02" class="slide-image__item js-target">
      <img src="https://source.unsplash.com/3esjG-nlgyk/640x360" alt="" />
    </li>
    <li id="item-03" class="slide-image__item js-target">
      <img src="https://source.unsplash.com/9HnSQn4TVEg/640x360" alt="" />
    </li>
  </ul>
  <div class="slide-text">
    <p data-target="item-01" class="slide-text__text js-trigger">
      <span>Iron Man</span>
    </p>
    <p data-target="item-02" class="slide-text__text js-trigger">
      <span>Thor</span>
    </p>
    <p data-target="item-03" class="slide-text__text js-trigger">
      <span>Captain America</span>
    </p>
  </div>
</div>
```

JavaScriptではまず画像群とテキスト群を変数として宣言します。

```js
const triggers = document.querySelectorAll(".js-trigger");
const images = document.querySelectorAll(".js-target");
```

テキストそれぞれにマウスhoverする度に処理を実行したいので、  
`triggers` に対して `forEach` を使用します。

カーソルが要素の上を移動したときにイベントが発生する `mouseover` を使用して、  
マウスhoverした際に処理が実行されるようにします。

```js
triggers.forEach(trigger => {
  trigger.addEventListener('mouseover', (e) => {
    // ここに処理を記述
  });
}
```

ここからは画像の切り替えに必要な `current` classの付け替え処理についてです。

マウスhoverされているテキストを取得して `item` に格納します。  
そのテキストに対応する画像idを取得して `target` に格納します。
取得したidをもとに表示させたい画像を取得して `current` に格納します。

```js
const item = e.currentTarget;
const target = item.getAttribute("data-target");
const current = document.getElementById(target);
```

現在 `current` になっている画像を非アクティブにするために
一旦、画像群に付与されている `current` classを削除します。

```js
images.forEach((image) => {
  image.classList.remove("current");
});
```

最後に先ほど取得した `current` に class `current` を追加します。

```js
current.classList.add("current");
```

最終的なJavaScriptのソースコードです。

```js
const triggers = document.querySelectorAll('.js-trigger');
const images = document.querySelectorAll('.js-target');

triggers.forEach(trigger => {
  trigger.addEventListener('mouseover', (e) => {
    const item = e.currentTarget;
    const target = item.getAttribute('data-target');
    const current = document.getElementById(target);
    images.forEach(image => {
      image.classList.remove('current');
    });
    current.classList.add('current')；
  });
});

```

## デモ

テキストにマウスhoverすると画像が切り替わります。

[デモ（CodeSandbox）](https://codesandbox.io/s/hover-slide-6kojzf)

## Reference 参照

- Array.prototype.forEach() [https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach) （2022-3-4参照）
- Element: mouseover イベント [https://developer.mozilla.org/ja/docs/Web/API/Element/mouseover_event](https://developer.mozilla.org/ja/docs/Web/API/Element/mouseover_event) （2022-3-4参照）


マウスhoverで画像が切り替わるスライド [jQuery不要]

Tags