|
1 | | -const left = document.querySelector('.left'); |
2 | | -const right = document.querySelector('.right'); |
3 | | -const container = document.querySelector('.container'); |
| 1 | +document.addEventListener('DOMContentLoaded', () => { |
| 2 | + const left = document.querySelector('.left'); |
| 3 | + const right = document.querySelector('.right'); |
| 4 | + const container = document.querySelector('.container'); |
4 | 5 |
|
5 | | -left.addEventListener('mouseenter', () => { |
6 | | - container.classList.add('hover-left'); |
7 | | - container.classList.remove('hover-right'); |
8 | | -}); |
| 6 | + if (left && right && container) { |
| 7 | + left.addEventListener('mouseenter', () => { |
| 8 | + container.classList.add('hover-left'); |
| 9 | + container.classList.remove('hover-right'); |
| 10 | + }); |
9 | 11 |
|
10 | | -right.addEventListener('mouseenter', () => { |
11 | | - container.classList.add('hover-right'); |
12 | | - container.classList.remove('hover-left'); |
13 | | -}); |
| 12 | + right.addEventListener('mouseenter', () => { |
| 13 | + container.classList.add('hover-right'); |
| 14 | + container.classList.remove('hover-left'); |
| 15 | + }); |
14 | 16 |
|
15 | | -left.addEventListener('mouseleave', () => { |
16 | | - container.classList.remove('hover-left'); |
17 | | -}); |
| 17 | + left.addEventListener('mouseleave', () => { |
| 18 | + container.classList.remove('hover-left'); |
| 19 | + }); |
18 | 20 |
|
19 | | -right.addEventListener('mouseleave', () => { |
20 | | - container.classList.remove('hover-right'); |
| 21 | + right.addEventListener('mouseleave', () => { |
| 22 | + container.classList.remove('hover-right'); |
| 23 | + }); |
| 24 | + } |
21 | 25 | }); |
0 commit comments