Displaying multiple CMS texts on a fixed text area by hovering the mouse cursor over them

Design help Custom code
1

Hello everyone!
I struggled with this so much that I ended up registering for the forum…

I want the title inside the card to change with the fixed text at the top of the page when I hover over a CMS collection card on my page. I tried to solve this with JavaScript, but I only managed to reflect the title of the first listed card. Nothing happens when hovering over the other cards.

Here’s my JavaScript code:

const xElements = document.querySelectorAll('.xElement');
const yTexts = document.querySelectorAll('.yText');
const zTexts = document.querySelectorAll('.zText');

xElements.forEach((xElement, index) => {
  let originalYValue = yTexts[index].textContent;

  xElement.addEventListener('mouseover', function() {
    originalYValue = yTexts[index].textContent;
    const xValue = xElement.getAttribute('data-value');
    yTexts[index].textContent = xValue;
    zTexts[index].textContent = xValue;
  });

  xElement.addEventListener('mouseout', function() {
    yTexts[index].textContent = originalYValue;
    zTexts[index].textContent = 'Z text';
  });
});

I’m grateful for your support! :melting_face:

2

hi @turtleannie the best way to get help is to follow the forum post guide that is pinned on top of each section, if you have missed it here they are.

When posting please:

  • Required: Share your project’s Read-Only link AND live site’s Published link
  • The read-only link is a special URL generated in the Dashboard to allow others to view your project in the Webflow Designer. How to get your project’s read-only link?
  • The published link is the webflow.io subdomain where you can view the live site with custom code running. It is IMPORTANT to share this link, as custom code does not run in the Designer.
  • Upload as many screenshots/screencast videos as possible to help others help you faster
  • Add a description and/or post a link to a working example of what you’re trying to achieve
  • Reply to users by tagging using the @ sign followed by their forum username like this: @turtleannie

EDIT: you should revisit your code as method querySelectorAll() doesn’t create an Array to be able to loop over.

const xElements = document.querySelectorAll('.xElement');
// possible solution to create an Array
const xElementsArr = Array.from(xElements)
// or
const xElementsArr = Array.from(document.querySelectorAll('.xElement'));
// or
const xElementsArr = [... document.querySelectorAll('.xElement')];
// or 

const [... xElementsArr] = document.querySelectorAll('.xElement');
// or ....

All of these use different syntax but all create an Array you can loop over.

1 Like
3

Welcome @turtleannie :wave:

Have you tried using Webflow Interactions instead of custom code?

1 Like
4

hi @ChrisDrit can you post some examples of how to change text content of one element by hovering over other elements by using WF interactions?

5

First of all, thank you very much for your interest. Due to the complexity of my own project, I’ve created a demo view on a new project. You can see the demo on the ‘Categories Template’ page.

I’d like the text in ‘category_header’ to change to ‘blog_header’ when hovering over ‘blog_card’. I plan to apply the same example for the excerpts as well. Since I’m quite new to JavaScript, I wasn’t able to implement the example you provided. I would be incredibly grateful if you could assist me. :pray:

read-only link

published link

6

hi @turtleannie here is simple example to start with.

Read Only
live

1 Like
7

This worked great, @Stan ! You’re the best! :muscle:t6:

1 Like