Text swap hover interaction inital state changes depending on

Design help Animations & Interactions
#1

I got a question for the Webflow community. I have these hover interactions set up in Webflow natively, so that when you hover on a flavor button, the flavor header name changes. And when you click the button the flavor/can image changes along with the header. My question is in regards to the hover interaction, I would like for the header to go back to whatever flavor button is currently focused. So if the orange button is focused and when you hover over lime button it changes to lime header but when you hover off lime I would like that header to change back to orange or whatever current flavor is focused.

https://preview.webflow.com/preview/alza-66e2ab6853f4e8f93a240654059b47e0?utm_medium=p[…]0&preview=24311097f7b8057cf341c58d4663038d&workflow=preview

I made a loom video that might better explain it.

I’m sure there is some jQuery code that could fix this up.Cheers (edited)

Here is my public share link: LINK
(how to access public share link)

#2

T.ricks coming through again with the code fix🙏

The issue was solved with some code, as this cannot be done natively in Webflow.

You would set the the attributes to reflect what you would like the heading to say and it’s color value

Screen Shot 2022-10-28 at 2.31.38 PM
Screen Shot 2022-10-28 at 2.31.38 PM1478Ă—966 165 KB 

<script>
let link = $(".link");
let selectedColor;
let selectedText;

function setSelected() {
  selectedColor = link.filter(".active").attr("data-color");
  selectedText = link.filter(".active").attr("data-text");
}
setSelected();

function setHeading(color, text) {
  $(".heading").css("color", color);
  $(".heading").text(text);
}

link.on("click", function () {
  link.removeClass("active");
  $(this).addClass("active");
  setSelected();
  setHeading(selectedColor, selectedText);
});

link.on("mouseenter", function () {
  let hoverColor = $(this).attr("data-color");
  let hoverText = $(this).attr("data-text");
  setHeading(hoverColor, hoverText);
});

link.on("mouseleave", function () {
  setHeading(selectedColor, selectedText);
});
</script>

Hope you found this helpful
:v: