Change An Element's Text On Hover (without interactions)

Demo:

See it in action here: Samuel Liew - Professional Services

Description:

Since this is not possible via interactions (other than setting up an interaction toggle to hide the top element of two different elements “absolute” positioned on top of each other), we are going to use a small piece of reusable code that will enable this functionality on any element(s) on your site. This piece of code will also “save” the original button/element’s width and height, so that the button doesn’t resize if the length of text is different!

Step 1:

Paste this in Site Settings > Custom Code > Footer Code. Save changes.

<script>
Webflow.push(function() {
  
  // Hover text change
  $('[data-hover-text]').hover(function() {
    var el = $(this); el.attr('data-hover-original', el.text()).css({ 'width': el.outerWidth()+'px', 'height': el.outerHeight()+'px' }).text(el.attr('data-hover-text'));
  }, function() {
    var el = $(this); el.css({ 'width': '', 'height': '' }).text(el.attr('data-hover-original'));
  });
});
</script>

Step 2:

For each element/button/whatever you want this on, add a custom property Name data-hover-text with the Value to be the hover text.

Step 3:

As simple as that. Publish and enjoy.


Caveats:

  • The code above only replaces TEXT. If you want to replace more complex content like HTML content like nested divs, etc, you might be better off using interactions.

  • You can’t replace custom attributes on elements from the Editor, and you need to change this from the Designer view.

  • This piece of code will try to “save” the original button/element’s width and height, so that the button doesn’t resize if the length of text is different! If you don’t want the size fixed, use the code below instead

Code
<script>
Webflow.push(function() {
  
  // Hover text change
  $('[data-hover-text]').hover(function() {
    $(this).attr('data-hover-original', $(this).text()).text($(this).attr('data-hover-text'));
  }, function() {
    $(this).text(el.attr('data-hover-original'));
  });
});
</script>

See also:

Change An Image's Image On Hover (without interactions)

Also, feel free to contact me for further code help and/or customization of third-party plugins

9 Likes

Woah! I definitely will be referencing this for later!

Thank you @samliew!

Best,

Nathan

thank you samliew for such great tutorial :pray:

i have used the second code in order to have the width changed, however the button gets stuck on hover mode and doesn’t switch back.

could you please help with this one?

Hi,

I know this is probably a dead thread now, but for anyone like myself who needed the function with changing width and height, I found this to work (basically removed the css attribute so it is set to auto)

<script>
  //menu change text on hover

Webflow.push(function() {
  
  // Hover text change
  $('[data-hover-text]').hover (function() {
    var el = $(this); el.attr('data-hover-original', el.text()).css({}).text(el.attr('data-hover-text'));
  }, function() {
    var el = $(this); el.css({ 'width': '', 'height': '' }).text(el.attr('data-hover-original'));
  });
});
</script>

James

1 Like

I added: Webflow.restart(); and it worked.
See the whole script below

Thank you so much for the nice code!

I modified your Javascript code and applied it, but when the mouse is not over the element, I can’t get it to go back to the initial text state.

Is there any way that I can fix this?

Thank you in advance!

Hi! Thank you a lot for your code, super useful! I would like to change text on one element eg: “Div1” while hovering on another element eg: “Card”, but I am not able to correct the code. Is it possible to make it work by triggering another element? Does anybody know how to do it? Thank you! :slight_smile: