.st0{fill:#0A60AA;} .st1{fill:#3C3C3C;} Free advice image var handleMouseOver = () => { var productsAll = document.querySelectorAll(".product, .product-image"); productsAll.forEach(function(e) { e.classList.add('paused'); }); }; var handleMouseLeave = () => { document.querySelectorAll(".product, .product-image").forEach(function(e) { e.classList.remove('paused'); e.classList.remove('opacity0'); e.classList.remove('opacity1'); }); }; var handleClickProduct = (productType) =>{ document.querySelectorAll(".product-active, .product-image").forEach(function(e) {e.classList.add('opacity0');}); var productClass = "." + productType + "-active"; document.querySelectorAll(productClass).forEach(function(e) { e.classList.remove('opacity0'); e.classList.add('opacity1'); }); }; var handleEvents = () => { var allProducts = document.querySelectorAll('.product'); allProducts.forEach(function(e) { e.addEventListener('mouseover', handleMouseOver); e.addEventListener('mouseleave', handleMouseLeave); }); document.querySelectorAll('.solar-active, .solar-inactive').forEach(function(e) { e.addEventListener('click', handleClickProduct.bind(this,'solar')); e.addEventListener('mouseover', handleClickProduct.bind(this,'solar')); }); document.querySelectorAll('.home-active, .home-inactive').forEach(function(e) { e.addEventListener('click', handleClickProduct.bind(this,'home')); e.addEventListener('mouseover', handleClickProduct.bind(this,'home')); }); document.querySelectorAll('.cloud-active, .cloud-inactive').forEach(function(e) { e.addEventListener('click', handleClickProduct.bind(this,'cloud')); e.addEventListener('mouseover', handleClickProduct.bind(this,'cloud')); }); document.querySelectorAll('.wallbox-active, .wallbox-inactive').forEach(function(e) { e.addEventListener('click', handleClickProduct.bind(this,'wallbox')); e.addEventListener('mouseover', handleClickProduct.bind(this,'wallbox')); }); }; window.addEventListener('load', handleEvents); .link-text { font-family:Din,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif; font-size: 0.9rem; font-weight: 500; line-height: 1.66; text-align: left; fill: #0a60a7; background: #fff; letter-spacing: 0.05rem; } .title-text--active { font-family:Din,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif; font-size: 1.6rem; font-weight: 500; line-height: 1.66; text-align: left; background-color: transparent; fill: #fff; letter-spacing: 0.05rem; } .title-text--inactive { font-family:Din,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif; font-size: 1.6rem; font-weight: 500; line-height: 1.66; text-align: left; background-color: transparent; fill: #3c3c3c; letter-spacing: 0.05rem; } .description-text { font-family:Din,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif; font-size: 0.9rem; font-weight: 400; line-height: 1.66; text-align: left; background-color: transparent; fill: #3c3c3c; letter-spacing: 0.05rem; } .solar-active { animation: hideshow 12s ease infinite; } .home-active { opacity: 0; animation: hideshow 12s 3s ease infinite; } .wallbox-active { opacity: 0; animation: hideshow 12s 6s ease infinite; } .cloud-active { opacity: 0; animation: hideshow 12s 9s ease infinite; } @keyframes hideshow { 0% { opacity: 1; } 25% { opacity: 1; } 30% { opacity: 0; } 100% { opacity: 0; } } svg > * { animation-play-state: running; } svg:hover > .paused { animation-play-state: paused; } .opacity1 { opacity: 1 !important; animation-play-state: paused; } .opacity0 { opacity: 0 !important; animation-play-state: paused; } 4.5 based on 815 reviews We use cookies and similar technologies to optimize your visit to our website and to continuously improve it. For this purpose, we use services from third-party providers who, among other things, transmit the data to third countries (e.g. USA) that do not have a level of data protection comparable to that of the EU. You can decline here . Let me choose ... Agreed