Hi janayharris ,
It took a while but I think I managed to find out how to do this! 😁
Using the new Buttonizer API it was possible to select all the buttons and add a new hover effect that adds the color onto the previous buttons.
Copy and paste this script into your site's footer;
<script>
window.addEventListener("buttonizer_initialized", (obj) => {
const hoverCSS = document.createElement("style")
hoverCSS.innerHTML = `
.buttonizer-hover i {
color: rgb(243 233 0) !important
}
`
document.head.appendChild(hoverCSS)
let elements = []
Object.values(obj.detail.groups).map(group => {
Object.values(group.buttons).map(button => {
if(!button.data.is_menu) {
elements.push(button.element)
}
})
})
for(let element in elements) {
elements[element].addEventListener("mouseover", () => {
for(let previous in elements.slice(0, element)) {
elements.slice(0, element)[previous].classList.add("buttonizer-hover")
}
})
elements[element].addEventListener("mouseout", () => {
for(let previous in elements.slice(0, element)) {
elements.slice(0, element)[previous].classList.remove("buttonizer-hover")
}
})
}
});
</script>
And it should work like this:
Let me know if it works for you! 😄
