Creating a dynamic text expansion feature triggered by the mouse hovering over

Question

Creating a dynamic text expansion feature triggered by the mouse hovering over

I am looking to create an expanding menu text similar to what can be found on this webpage: example

Below is my JavaScript code that currently works but has some drawbacks. The code is lengthy, not very professional, and lacks responsiveness. For instance, when the screen resolution is reduced, most of the letters extend beyond the screen.

I have placed each letter in a separate div element.

Question: Is there a way to group all the 'div's into an array and make them expand based on the width of their parent div ('NavPersonalBlog')?

Thank you for any suggestions and apologies for any language errors :)

$(".NavPersonalBlog").on("mouseenter", function() {
  // Animation code here
});
$(".NavPersonalBlog").on("mouseleave", function() {
  // Animation code here
});

javascript jquery html css

Answer 1

Answer №1

No jQuery or JS code is necessary here. You can create the desired effect by utilizing a CSS transition with the letter-spacing property:

div {
  font: bold 2em arial;
  text-align: center;
  transition: letter-spacing 0.5s;
}
div:hover {
  letter-spacing: 2em;
}

<div>HEADING</div>

Answer 2

No jQuery or JS code is necessary here. You can create the desired effect by utilizing a CSS transition with the letter-spacing property:

div {
  font: bold 2em arial;
  text-align: center;
  transition: letter-spacing 0.5s;
}
div:hover {
  letter-spacing: 2em;
}

<div>HEADING</div>

Answer 3

Answer №2

To achieve the desired outcome, the CSS property letter-spacing is a good place to start.

Although, as mentioned by @chazsolo in their response, this method does not provide perfect centering. By adding a non-breaking space at the beginning of the text, it can help create additional spacing between characters - yet still resulting in centering based on character count rather than width. (It also slightly shifts the alignment when not hovered.) Even with varying letter widths, the X remains fixed due to three letters on each side:

div {
  text-align:center; 
  transition: letter-spacing 1s;
}

div:hover {
  letter-spacing: 20px
}

<div>SAMPLE</div>
<div>&nbsp;MMMXIII</div>

This approach is straightforward and may suffice, but for more accuracy, consider following chazsolo's advice.

Answer 4

To achieve the desired outcome, the CSS property letter-spacing is a good place to start.

Although, as mentioned by @chazsolo in their response, this method does not provide perfect centering. By adding a non-breaking space at the beginning of the text, it can help create additional spacing between characters - yet still resulting in centering based on character count rather than width. (It also slightly shifts the alignment when not hovered.) Even with varying letter widths, the X remains fixed due to three letters on each side:

div {
  text-align:center; 
  transition: letter-spacing 1s;
}

div:hover {
  letter-spacing: 20px
}

<div>SAMPLE</div>
<div>&nbsp;MMMXIII</div>

This approach is straightforward and may suffice, but for more accuracy, consider following chazsolo's advice.

Answer 5

Answer №3

The answers provided are commendable, however, they do not meet my design standards in terms of centering. It is evident that the centering in the accepted answer falls between the characters D and I, while in the "SAMPLE" answer, the P serves as the center point. Below is a code snippet that will help achieve a more aesthetically pleasing center, although it may require a bit more structure (extra HTML) and setup.

div {
  display: flex;
  justify-content: center;
  align-items: center;
}

span {
  text-align: center;
  flex: 1;
  transition: all 1s ease-in-out 0s;
  max-width: 3%;
}

div:hover span {
  max-width: 7%;
}

<div>
  <span>H</span>
  <span>E</span>
  <span>A</span>
  <span>D</span>
  <span>I</span>
  <span>N</span>
  <span>G</span>
</div>

Answer 6

The answers provided are commendable, however, they do not meet my design standards in terms of centering. It is evident that the centering in the accepted answer falls between the characters D and I, while in the "SAMPLE" answer, the P serves as the center point. Below is a code snippet that will help achieve a more aesthetically pleasing center, although it may require a bit more structure (extra HTML) and setup.

div {
  display: flex;
  justify-content: center;
  align-items: center;
}

span {
  text-align: center;
  flex: 1;
  transition: all 1s ease-in-out 0s;
  max-width: 3%;
}

div:hover span {
  max-width: 7%;
}

<div>
  <span>H</span>
  <span>E</span>
  <span>A</span>
  <span>D</span>
  <span>I</span>
  <span>N</span>
  <span>G</span>
</div>

Creating a dynamic text expansion feature triggered by the mouse hovering over

Answer №1

Answer №2

Answer №3

Similar questions

The Fetch function seems to be malfunctioning in Next.js

The functionality of module.exports and require operation

In which part of the DOM tree are Event/Callbacks typically located?

What is the optimal method for displaying dynamic HTML content?

Obtaining MIME-TYPE from a Base 64 String: A Handy Guide

Implementing an Ajax call within a loop

Is it feasible to generate/save a JSON file to a hard drive using an HTML application and pure JavaScript without the need for Node.js or a server?

Tips for adding style to the first list element and first children using jQuery

Ways to access and delete the canvas using ref steps?

Activate the parent navigation link when on sub-pages

Locate elements in a 2D Array with Google Apps Script

What is the best way to add <li> to every element in an array?

Completes a form on a separate website which then populates information onto a different website

Error Encountered: Unable to utilize $(...).mask function with jQuery in ASP.NET using C#

Challenges with Selenium Extraction: Delays in Wait Times/Struggles with Locating

What is the best way to utilize JavaScript methods for retrieving dynamic data?

What are effective ways to work around the CORS policy while making get/post requests from within React JS?

Ways to save an array in my database with each value occupying a single row

The issue of CSS transitions flickering in Internet Explorer

How can I prevent a horizontal scrollbar from appearing in HTML when using margin:-4px and what are some possible solutions to this