Enlarging the font size of a specific <a> element dynamically with JavaScript, while ensuring that the padding of surrounding <a> elements remains

I have the following code snippet to display 3 links side by side:

<div class="col-xl-9 col-lg-9">
    <div class="main-menu  d-none d-lg-block">
        <nav>
            <ul id="navigation">
                <li><a class="movement" href=@customurl style="@Html.IsSelected(actions: "Index", controllers: "Home")">home</a></li>
                <li><a class="movement" style="@Html.IsSelected(actions: "FAQ", controllers: "Home")" href="@(customurl+ "home/faq/")">FAQ</a></li>
                <li><a class="movement" style="@Html.IsSelected(actions: "Contact", controllers: "Home" )" href="@(customurl+ "home/Contact/")">Contact</a></li>
              
            </ul>
        </nav>
    </div>
</div>

Additionally, I have implemented a JavaScript function to increase the font size of a link when hovered over.

 $(document).ready(function () {
            //window.location.replace("https://vytalizehealth.com/");
            $(function () {
                
                $(".movement").hover(
                   
                    function () {
                        $(this).css("fontSize", "20px");
                    },
                    function () {
                        $(this).css("fontSize", "16.5px");
                    })
            }); });

However, an issue arises where expanding the text when hovering causes neighboring links to shift horizontally. How can I enlarge the hovered link's text without affecting the alignment of other links?

javascripthtmlcss

Answer №1

If you could kindly incorporate some CSS styling, that would be greatly appreciated. Below is the complete code snippet:

$(document).ready(function () {
  //window.location.replace("https://vytalizehealth.com/");
  $(function () {

    $(".movement").hover(

      function () {
        $(this).css("fontSize", "20px");
      },
      function () {
        $(this).css("fontSize", "16.5px");
      })
  });
});
li {
  height: 20px;
  align-content: center;
  position: relative;
}
li a {
  position: absolute;
  bottom: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div class="col-xl-9 col-lg-9">
  <div class="main-menu  d-none d-lg-block">
    <nav>
      <ul id="navigation">
        <li><a class="movement" href=@customurl style="@Html.IsSelected(actions: " Index", controllers: "Home"
            )">home</a></li>
        <li><a class="movement" style="@Html.IsSelected(actions: " FAQ", controllers: "Home" )" href="@(customurl+ "
            home/faq/")">FAQ</a></li>
        <li><a class="movement" style="@Html.IsSelected(actions: " Contact", controllers: "Home" )" href="@(customurl+ "
            home/Contact/")">Contact</a></li>

      </ul>
    </nav>
  </div>
</div>

Thank you in advance.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Exploring the Node Promise Chain: Utilizing Local Functions and Managing Multiple Value Passing in a Code Review

Upon reviewing the code provided, several questions have arisen: #1 I am curious about the best way to make the values returned by the bluebird.all functions accessible in subsequent functions. Is using the this-context a viable option without declaring t ...

javascriptnode.jspromisebluebirdcontrol-flow

A method for utilizing history.goBack in linked tabs while preventing the user from reverting to the previously selected tab

In my application, I have a settings modal that contains tabs which act as links to different paths. When the user clicks on the background outside of the modal, it triggers the history.goBack function. However, I noticed that if the user has already click ...

javascriptreactjsreact-router

Slowdown in functionality

My current project involves creating a user interface for an Oven configuration application using CSS, Java Script, Jquery & Json. While the interface performs actions within milliseconds on browsers and simulators, my client has noticed that it takes seco ...

javascriptjqueryhtmlcss

`Welcome to the World of AngularJS with IntelliJ IDEA`

Hey there! I'm currently diving into the world of Angular.js and IntelliJ IDEA, but seems like I've hit a roadblock. I'm attempting to create a basic "hello world" example from a book in the IDE, but it's just not cooperating. After dow ...

javascriptangularjsintellij-idea

Can JavaScript values be passed into CSS styles?

I am currently working on dynamically updating the width of a CSS line based on a JavaScript value (a percentage). The line is currently set at 30%, but I would like to replace that hard-coded value with my JavaScript variable (c2_percent) to make it mor ...

javascripthtmlcssdjango

Sticky positioning for dropdown menu in table column body

Greetings, I need some assistance with a formatting issue. My goal is to make the first and second columns of my table sticky by applying a "sticky" position to them. However, one of the columns contains a dropdown menu and the problem is that the content ...

htmlcss

Converting NodeJS newline delimited strings into an array of objects

What is the method for reading a text file as follows: `{'values': [0,1,0], 'key': 0} {'values': [1,1,0], 'key': 1} {'values': [1,1,0], 'key': 1}` using: var fs = require('fs'); fs. ...

javascriptnode.jsarrays

JavaScript Datepicker Formatting

I need to modify the date format of a datepicker. Currently, it displays dates in MM/DD/YYYY format but I want them to be in DD-MM-YYYY format. <input id="single-date-picker" type="text" class="form-control"> Here's the JavaScript code: $("# ...

javascripthtmldatepicker

In JavaScript, capture data returned from a function in a separate variable using a POST REST API call

So, here's the deal - I've got this awesome code that does a POST to an API in order to fetch some data. The best part? It works like a charm when it's wrapped up neatly in a function. But now, the tricky part comes in. I need to actually re ...

javascriptnode.jspost

Exploring the possibilities of accessing Vue.prototype within an .addEventListener function

I've been attempting to access the global object Vue.prototype.$firebase, which is declared in main.js. import Vue from "vue"; import App from "./App.vue"; import router from "./router"; import VueTailwind from "vue- ...

javascriptvue.jsecmascript-6vuejs2vue-component

Clicking an element to uncover more information

Currently, I am working on solving the second question within this series of problems. The task involves creating a functionality where clicking on a legislator's name displays additional information about them. You can view my progress so far by visi ...

javascriptjqueryapiget

"The controller seems to always return an 'undefined' value for the Angular

Within my project, I have implemented ui-view with the following structure: <main class="content"> <div class="inner" ng-controller="OrderPageController"> <div ui-view="main-info"></div> <div ui-view="comment ...

javascriptangularjsforms

What is the process for obtaining Style.css, additional CSS, and JavaScript files from a live single page website?

I am currently facing a challenge with a live single page website where I need to make some fixes. Unfortunately, I am unable to access the Style.css file, along with other css and javascript files. Although I managed to save the html file by using Ctrl+s, ...

javascriptjqueryhtmlcss

Leveraging React Native to retrieve information from a promise in JSON format

After successfully fetching the JSON data, I now have an array. My question is how can I utilize the elements within this array in a React Native environment? Below is my current approach: export default function display() { const fetching = async() => ...

javascriptreactjsreact-nativefetchasync.js

<Select> Placeholder customization

For my react project, I am utilizing material-Ui and I am looking to have a placeholder that stands out by having grey text instead of black when compared to the selected item. <Select name="answer" value={values.answer} onChange={handleChange} onBlur= ...

javascriptcssreactjsmaterial-ui

Implementing debounce functionality in Angular using CodeMirror

I've tried various approaches and even referred to This Possible Dup Currently utilizing the ng2-codemirror 1.1.3 library with codemirror 5.33.0 interface Simply attempting to add a DebounceTime operator to the change event of the CodeMirror Editor ...

javascriptangulartypescriptrxjscodemirror

Retrieve data from MySQL output in a separate file

In one of my functions, I need to access a variable called "result" which contains the query results. However, when I try to access it from another file where I am processing the output after making a POST Request, the variable is showing up as "undefined" ...

javascriptmysqlnode.jsexpress

Implementing the Infinite Scroll feature with 'react-infinite-scroll-component' on local JSON data: A step-by-step guide

Currently experimenting with frontEnd development, I have incorporated the 'react-infinite-scroll-component' as a dependency. My goal is to apply this effect to my local Json data without relying on any API calls at this stage. I'm encounter ...

javascriptreactjsjsontypescriptinfinite-scroll

Tips for clearing a textbox value in JQuery after a 5-second delay

I attempted the following: <script type="text/javascript"> $(function() { $("#button").click( function() { alert('button clicked'); // this is executed setTimeout(function() ...

javascriptjquery

JavaScript Age confirmation Overlay

I designed an age verification popup with the help of some online tutorials and a friend due to my limited knowledge of JavaScript. Check it out live here- My issue is that I want this popup to load/appear after the page content loads, but I'm not s ...

javascriptjqueryhtmlcss