.leistung-hover-heading,
.leistung-divider {
transition:
color 0.4s cubic-bezier(0.22, 1, 0.36, 1),
background-color 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}document.addEventListener('DOMContentLoaded', () => {
const headings = document.querySelectorAll('.leistung-hover-heading');
const dividers = document.querySelectorAll('.leistung-divider');
const icons = document.querySelectorAll('.leistung-hover-icon');
const bottomTxt = document.querySelectorAll('.leistungen-bottom-txt');
// Schwarz
document.querySelectorAll('.leistungs-hover-card').forEach(trigger => {
trigger.addEventListener('mouseenter', () => {
headings.forEach(el => el.style.color = '#000');
dividers.forEach(el => el.style.backgroundColor = '#000');
icons.forEach(el => el.style.color = '#000');
bottomTxt.forEach(el => el.style.color = '#000');
});
trigger.addEventListener('mouseleave', () => {
headings.forEach(el => el.style.color = '');
dividers.forEach(el => el.style.backgroundColor = '');
icons.forEach(el => el.style.color = '');
bottomTxt.forEach(el => el.style.color = '');
});
});
// Weiß
document.querySelectorAll('.hover-trigger-light').forEach(trigger => {
trigger.addEventListener('mouseenter', () => {
headings.forEach(el => el.style.color = '#fff');
dividers.forEach(el => el.style.backgroundColor = '#fff');
icons.forEach(el => el.style.color = '#fff');
bottomTxt.forEach(el => el.style.color = '#fff');
});
trigger.addEventListener('mouseleave', () => {
headings.forEach(el => el.style.color = '');
dividers.forEach(el => el.style.backgroundColor = '');
icons.forEach(el => el.style.color = '');
bottomTxt.forEach(el => el.style.color = '');
});
});
});
