https://www.eneres.co.jp/wp/wp-content/themes/eneres2026/js/index.js?20230807

1
2let mvTimer = null;
3
4//KVの動き
5$(document).ready(function () {
6  $('.p-kv_item').on('mouseenter', function () {
7      clearTimeout(mvTimer);
8    $('.p-kv_item').removeClass('--hover');
9    $(this).addClass('--hover');
10  });
11
12  $('.p-kv_item').on('mouseleave', function () {
13    let $this = $(this);
14    mvTimer = setTimeout(function () {
15      $this.removeClass('--hover');
16    }, 500); // 0.5秒後にクラスを削除
17  });
18
19    $('.p-kv_item_txt.--txt01').on('mouseenter', function () {
20        $(this).addClass('--active');
21        clearTimeout(mvTimer);
22        $('.p-kv_item').removeClass('--hover');
23        $('#kvImage01').addClass('--hoverTxt --hover');
24    });
25    $('.p-kv_item_txt.--txt01').on('mouseleave', function () {
26        $(this).removeClass('--active');
27        clearTimeout(mvTimer);
28        $('#kvImage01').removeClass('--hoverTxt');
29        mvTimer = setTimeout(function () {
30            $('#kvImage01').removeClass('--hover');
31        }, 500); // 0.5秒後にクラスを削除
32    });
33    $('.p-kv_item_txt.--txt02').on('mouseenter', function () {
34        $(this).addClass('--active');
35        clearTimeout(mvTimer);
36        $('.p-kv_item').removeClass('--hover');
37        $('#kvImage02').addClass('--hoverTxt --hover');
38    });
39    $('.p-kv_item_txt.--txt02').on('mouseleave', function () {
40        $(this).removeClass('--active');
41        clearTimeout(mvTimer);
42        $('#kvImage02').removeClass('--hoverTxt');
43        mvTimer = setTimeout(function () {
44            $('#kvImage02').removeClass('--hover');
45        }, 500); // 0.5秒後にクラスを削除
46    });
47    $('.p-kv_item_txt.--txt03').on('mouseenter', function () {
48        $(this).addClass('--active');
49        clearTimeout(mvTimer);
50        $('.p-kv_item').removeClass('--hover');
51        $('#kvImage03').addClass('--hoverTxt --hover');
52    });
53    $('.p-kv_item_txt.--txt03').on('mouseleave', function () {
54        $(this).removeClass('--active');
55        clearTimeout(mvTimer);
56        $('#kvImage03').removeClass('--hoverTxt');
57        mvTimer = setTimeout(function () {
58            $('#kvImage03').removeClass('--hover');
59        }, 500); // 0.5秒後にクラスを削除
60    });
61    $('.p-kv_item_txt.--txt04').on('mouseenter', function () {
62        $(this).addClass('--active');
63        clearTimeout(mvTimer);
64        $('.p-kv_item').removeClass('--hover');
65        $('#kvImage04').addClass('--hoverTxt --hover');
66    });
67    $('.p-kv_item_txt.--txt04').on('mouseleave', function () {
68        $(this).removeClass('--active');
69        clearTimeout(mvTimer);
70        $('#kvImage04').removeClass('--hoverTxt');
71        mvTimer = setTimeout(function () {
72            $('#kvImage04').removeClass('--hover');
73        }, 500); // 0.5秒後にクラスを削除
74    });
75    // $('.p-kv_item_txt.--txt02').on('mouseenter', function () {
76    //     clearTimeout(mvTimer);
77    //     $('#kvImage02').addClass('--hover');
78    // });
79    // $('.p-kv_item_txt.--txt02').on('mouseleave', function () {
80    //     mvTimer = setTimeout(function () {
81    //         $('#kvImage02').removeClass('--hover');
82    //     }, 500); // 0.5秒後にクラスを削除
83    // });
84});
85
86$(document).ready(function () {
87  // イメージのホバーイベント
88  $('#kvImage01, .p-kv_item_txt.--txt01').hover(
89      function () {
90        activateTitle('.p-kv_ttl01');
91        $('.p-kv_item_txt.--txt01').addClass('--active');
92      },
93      resetDefault,
94  );
95
96  $('#kvImage02, .p-kv_item_txt.--txt02').hover(
97      function () {
98        activateTitle('.p-kv_ttl02');
99        $('.p-kv_item_txt.--txt02').addClass('--active');
100      },
101      resetDefault
102  );
103
104  $('#kvImage03, .p-kv_item_txt.--txt03').hover(
105      function () {
106        activateTitle('.p-kv_ttl03');
107        $('.p-kv_item_txt.--txt03').addClass('--active');
108      },
109      resetDefault
110  );
111
112  $('#kvImage04, .p-kv_item_txt.--txt04').hover(
113      function () {
114        activateTitle('.p-kv_ttl04');
115        $('.p-kv_item_txt.--txt04').addClass('--active');
116      },
117      resetDefault
118  );
119
120  // 共通関数: 指定のタイトルをアクティブ化
121  function activateTitle(selector) {
122    // 全てのタイトルから--activeを削除
123    $('.p-kv_ttl h2').removeClass('--active');
124    // 指定のタイトルに--activeを付与
125    $(selector).addClass('--active');
126  }
127
128  // デフォルト状態に戻す
129  function resetDefault() {
130    $('.p-kv_ttl h2').removeClass('--active');
131    $('.p-kv_ttl00').addClass('--active');
132    $('.p-kv_item_txt').removeClass('--active');
133  }
134});
135
136
137
138
139