Pls help: hover effect on a selected word in a text

Ask the community
,
1

Hover effect

Heey, anyone knows how to create an hover effect that shows a video fullscreen when u go over a single word in a text? I’ve tried containers, single word animation but it seems i cant find the correct way! Thx

2

You will need the following …to be capable to generate your wished function…

a) A HTML-Component
b) Some code for your html-component
c) A LIGHTBOX
d) Some code on your wix-page.

CODE for your HTML-Component (iFrame):

<div id="sentence"></div>

<style>
  .hover-word {
    cursor: pointer;
    transition: color 0.3s;
    text-decoration: underline; /* optional: make clickable obvious */
  }
  .hover-word:hover {
    color: #ff5a5f;
  }
  #sentence {
    font-family: Arial, sans-serif;
    font-size: 18px;
    line-height: 1.5;
  }
</style>

<script>
  // Listen for messages from Wix
  window.addEventListener('message', (event) => {
    if(event.data && event.data.type === 'updateText') {
      const text = event.data.text;
      const targetWords = event.data.targetWords || [];

      const words = text.split(" ");

      // Wrap target words in <span> with click handler
      const html = words.map(word => {
        if(targetWords.includes(word)) {
          return `<span class="hover-word" onclick="sendClick('${word}')">${word}</span>`;
        }
        return word;
      }).join(" ");

      document.getElementById('sentence').innerHTML = html;
    }
  });

  function sendClick(word) {
    // Send clicked word back to Wix
    window.parent.postMessage({ type: 'wordClicked', word: word }, '*');
  }
</script>

Code for your Wix-Page:

import wixWindowFrontend from "wix-window-frontend";


$w.onReady(() => {
  const iframe = $w('#html1'); // your HTML iframe

  // Send initial sentence and target words
  iframe.postMessage({
    type: 'updateText',
    text: "And here we will have a big amount of characters words and maybe even whole phrases",
    targetWords: ["big", "characters", "whole"]
  });

  // Listen for clicks from iframe
  $w('#html1').onMessage((event) => {
    if(event.data.type === 'wordClicked') {
      const word = event.data.word;
      console.log("Clicked word:", word);

      // Open Wix Lightbox
      // Replace 'MyLightbox' with your lightbox ID
      wixWindowFrontend.openLightbox("Options")
        .then(() => console.log(`Lightbox opened for ${word}`));
    }
  });
});

Do not forget to add a HTML-Component and a LIGHTBOX to your setup.

How it will work ?

  1. On your page you have some code, where you can define your text.
  2. The text will be transfered into the HTML-Component.
  3. Inside of the HTML-Comp. you then can do whatever you want, working with CSS.
  4. HTML-Comp. do support the hover effects, sending data back to your wix-page.
  5. Wix page recieves the signals if an item has been clicked or hovered).

In the shown example, the some specific words gets marked on hover and a lightbox opens on click.

You can improve it even more!!!

Good luck!!!

CN-001
CN-0011298×1303 142 KB

Another option would be the CUSTOM-ELEMENT —>

class WordHighlighter extends HTMLElement {
  connectedCallback() {
    this.sentence = this.getAttribute('sentence') || '';
    this.targetWords = (this.getAttribute('targetWords') || '').split(',');

    this.render();
  }

  render() {
    const words = this.sentence.split(' ');

    this.innerHTML = words.map(word => {
      if(this.targetWords.includes(word)) {
        return `<span class="hover-word" data-word="${word}">${word}</span>`;
      }
      return word;
    }).join(' ');

    this.querySelectorAll('.hover-word').forEach(el => {
      el.style.cursor = 'pointer';
      el.addEventListener('click', () => {
        this.dispatchEvent(new CustomEvent('wordClick', {
          detail: { word: el.dataset.word },
          bubbles: true
        }));
      });
    });
  }
}

customElements.define('word-highlighter', WordHighlighter);
1 Like