テキスト以外にホバーしてもテキストがシャッフルされるようにしたい

JavaScriptライブラリ「shuffle-text」を使用して
マウスオーバーしたらテキストがシャッフルされる動きを実装しています。
↓
https://ics.media/entry/15498/

###今回知りたい事
テキストの上だけでなく画像（.top_artwork_con_img）や、リンク（.shuffle-con-a）にマウスホバーしても
テキストがシャッフルで動くように実装したいです。

js
1<script>
2   window.addEventListener('load', init);
3    function init() {
4      var effectList = [];
5      var elementList = document.querySelectorAll('.text-shuffle');
6
7      for (var i = 0; i < elementList.length; i++) {
8
9        var element = elementList[i];
10        element.dataset.index = i;
11
12        effectList[i] = new ShuffleText(element);
13
14        element.addEventListener('mouseenter', function () {
15          effectList[+this.dataset.index].start();
16        });
17      }
18    }
19</script>

HTML
1<div class="shuffle-con">
2	<a href="#" class="shuffle-con-a">
3		<img src="https://placehold.jp/1280x720.png" class="shuffle-img" alt="" />
4		<div class="text-shuffle">
5			<p>シャッフルされるテキスト</p>
6		</div>
7	</a>
8</div>
9<div class="shuffle-con">
10	<a href="#" class="shuffle-con-a">
11		<img src="https://placehold.jp/1280x720.png" class="shuffle-img" alt="" />
12		<div class="text-shuffle">
13			<p>シャッフルされるテキスト</p>
14		</div>
15	</a>
16</div>

↑の場合、シャッフルされるテキストにマウスをホバーしないと、テキストがシャッフルされないので
↓のように試してみました。

###試したこと
text-shuffleで全体を囲めばよいのではないか？と試したところ
画像などのテキスト以外が全て消えてシャッフルが行われた。

HTML
1<div class="shuffle-con">
2	<a href="#" class="shuffle-con-a text-shuffle">
3		<img src="https://placehold.jp/1280x720.png" class="shuffle-img" alt="" />
4		<p>シャッフルされるテキスト</p>
5	</a>
6</div>
7<div class="shuffle-con">
8	<a href="#" class="shuffle-con-a text-shuffle">
9		<img src="https://placehold.jp/1280x720.png" class="shuffle-img" alt="" />
10		<p>シャッフルされるテキスト</p>
11	</a>
12</div>

こちらお分かりになる方いらっしゃいましたら、よろしくお願いいたします。

###【追記】2021年6月24日　17時22分
①HTMLのコード修正（.shuffle-conは複数表示する予定）

行動規範の内容に同意します

回答1件

ベストアンサー

Javascript + html

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="shuffle-con">
        <a href="#" class="shuffle-con-a">
            <img src="https://placehold.jp/1280x720.png" class="shuffle-img" alt="" />
            <div class="text-shuffle">
                <p>シャッフルされるテキスト</p>
            </div>
        </a>
    </div>
    <script src="shuffle-text.js"></script>
    <script>
                window.addEventListener('load', init);
                    function init() {
                        var effectList = [];
                        var elementList = document.querySelectorAll('.text-shuffle');
                        var hoverTarget = document.getElementsByClassName("shuffle-con-a")[0];
                        for (var i = 0; i < elementList.length; i++) {
                            var element = elementList[i];
                            element.dataset.index = i;
                            effectList[i] = new ShuffleText(element);
                            hoverTarget.addEventListener('mouseenter', function () {
                                effectList[element.dataset.index].start();
                            });
                        }
                    }
    </script>
</body>

</html>

複数

Javascript + html

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="shuffle-con">
        <a href="#" class="shuffle-con-a">
            <img src="https://placehold.jp/200x200.png" class="shuffle-img" alt="" />
            <p class="text-shuffle">
                シャッフルされるテキスト
            </p>
        </a>
    </div>
        <div class="shuffle-con">
            <a href="#" class="shuffle-con-a">
                <img src="https://placehold.jp/200x200.png" class="shuffle-img" alt="" />
                <p class="text-shuffle">
                    シャッフルされるテキスト
                </p>
            </a>
        </div>
    <script src="shuffle-text.js"></script>
    <script>
                window.addEventListener('load', init);
                    function init() {
                        var effectList = [];
                        var elementList = document.querySelectorAll('.text-shuffle');
                        var hoverTarget = document.getElementsByClassName("shuffle-con-a");
                        for(let i=0;i< elementList.length;i++){
                        var element = elementList[i];
                        element.dataset.index = i;
                        effectList[i] = new ShuffleText(element);
                        hoverTarget[i].addEventListener('mouseenter', function () {
                            effectList[i].start();
                        });
                        }
                    }
    </script>
</body>

</html>

投稿2021/06/24 06:01

編集2021/06/24 14:21