GrassClipper/resources/js/hoverEvt.js
2022-05-02 22:48:03 -07:00

36 lines
1.1 KiB
JavaScript

document.addEventListener('DOMContentLoaded', async () => {
const firstPanel = document.querySelector('#firstPanel')
const secondPanel = document.querySelector('#secondPanel')
const thirdPanel = document.querySelector('#thirdPanel')
// Listen to hovers
firstPanel.addEventListener('mouseover', () => {
secondPanel.classList.add('darken')
thirdPanel.classList.add('darken')
})
firstPanel.addEventListener('mouseout', () => {
secondPanel.classList.remove('darken')
thirdPanel.classList.remove('darken')
})
secondPanel.addEventListener('mouseover', () => {
firstPanel.classList.add('darken')
thirdPanel.classList.add('darken')
})
secondPanel.addEventListener('mouseout', () => {
firstPanel.classList.remove('darken')
thirdPanel.classList.remove('darken')
})
thirdPanel.addEventListener('mouseover', () => {
firstPanel.classList.add('darken')
secondPanel.classList.add('darken')
})
thirdPanel.addEventListener('mouseout', () => {
firstPanel.classList.remove('darken')
secondPanel.classList.remove('darken')
})
})