Preventing links from moving when an icon appears on hover: A simple guide

I'm currently working on adding a paw icon next to a link when it's hovered over. I want the icon to be initially invisible and only appear when the link is hovered over. The issue I'm facing is that when I hover over a link, the other links shift to the side because of the visible icon. Is there a way to ensure that the links already account for the size of the icon so they don't jump to the side when it appears on hover?

[HTML](https://i.sstatic.net/a1CQq.png)
[CSS](https://i.sstatic.net/f17Ew.png)
[Before Hover](https://i.sstatic.net/MMFDV.png)
[After Hover](https://i.sstatic.net/HQv12.png)

As I am still new to Web Development, I believe the solution to this problem might be simple. I've tried various random solutions, tweaking code here and there without much success. Despite my efforts to adjust the width of the link after hovering to match its initial width before hovering, the links continue to shift. Any guidance or advice would be greatly appreciated.

Thank you in advance.

htmlcsshover

Answer №1

The issue at hand arises from elements that have the display:none property not being displayed in the DOM. As a result, the width of the element is not calculated, causing it to shift when made visible by changing to display:block.

There are several solutions available for this problem. Here are two simple approaches:

1. Implement visibility

HTML:

<a href="#"><i class="icon hide">icon</i>Test</a>
<a href="#"><i class="icon hide">icon</i>Test</a>
<a href="#"><i class="icon hide">icon</i>Test</a>

CSS:

.icon.hide {
  visibility: hidden;
}
a:hover .icon.hide {
  visibility: visible;
}

2. Use opacity (with the option of adding transition effects)

HTML:

<a href="#"><i class="icon hide">icon</i>Test</a>
<a href="#"><i class="icon hide">icon</i>Test</a>
<a href="#"><i class="icon hide">icon</i>Test</a>

CSS:

.icon.hide {
  opacity: 0;
}
a:hover .icon.hide {
  opacity: 1;
}

Hopefully, these solutions address your issue.

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

The lines intersecting with the ethereal image in the background

I'm trying to achieve button links with an image overlay, but so far I've only been able to do it using CSS: section a:link, section a:visited { width: 150px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: ...

cssimagehtmlmargin

display the inner div adjacent to the outer div

I am trying to create a vertical menu with submenus, and I need the submenu to appear next to its parent div. Has anyone encountered this issue before? I searched on Google but could only find solutions for placing two divs next to each other. I specifica ...

htmlcssmenusubmenudropdown

Position an iframe in alignment

I'm working on a HTML page and I have been trying to figure out how to align an iframe at the bottom of the page so that it spans the entire width. Despite my efforts, I haven't been successful in getting the iframe to align properly at the botto ...

htmlcssiframe

Is it possible to identify if the resize event is activated by zooming in on a mobile device?

Recently, I encountered an issue with a function that is activated by the resize event in order to dynamically adjust my page layout. This function is crucial for ensuring that my page appears properly when users expand or reduce their address bars on mobi ...

javascripthtmlmobile-safari

What strategies can I use to dynamically update the .active class in jquery so it doesn't only target the initial one?

Utilizing bootstrap for tab-fade functionality has been successful so far. However, I am facing an issue when trying to select multiple active classes instead of just one. My current JQuery code only changes the text in the first element with the "active" ...

javascriptjqueryhtmlcss

How to use Jquery to dynamically alter cell backgrounds in a table based on their values?

I successfully imported the table from MySQL to HTML, as shown below: https://i.sstatic.net/kzJtF.png My script is designed to highlight the two lowest and two highest values in each column: $(document).ready(function(){ var $table = $("#tbTodos"); ...

jquerycsshtml-tablecellhighlight

Concealing spinner controls on HTML Ionic number input

Seeking a foolproof method to conceal spinner buttons on an HTML template for Ionic's number input field. Showcased below is the HTML code that exhibits an input with spinner buttons: <ion-input type='number'></ion-input> The ...

htmlcssionic-frameworkmobileionic3

Putting a | in the navigation bar

Could use some assistance here as I'm struggling to add a | between 'About Us' and 'Login' in my code. Any tips on how to achieve this? I've checked other posts but can't seem to apply it correctly to my specific lines of ...

htmlcssangularbootstrap-4

Attempting to generate a cost estimator, however, no results are showing up upon clicking the calculate button

Having based my code on a template and being fairly new to Javascript, I expected everything to work smoothly. However, upon testing it, I encountered an issue where nothing was displayed in the results boxes. My goal is to develop a pricing calculator th ...

javascripthtml

Is it possible to create an HTML select that displays transparent text after a selection

I'm currently working on customizing the appearance of an HTML select element with various background color options. Everything is functioning properly, but I have a specific requirement. I want the text in the dropdown options to be visible only when ...

jqueryhtmlcolorshtml-select

The absence of jQuery is causing an error in the Twitter Bootstrap code

I am encountering an issue where I am receiving an error message stating that jQuery is not defined. My intention is to utilize both twitter bootstrap and jQuery-UI in my project. In the <head> section, I have included all the necessary CSS and JS fi ...

javascriptjqueryhtmlcsstwitter-bootstrap

Instead of displaying a regular text box, the output unexpectedly shows "Printing [object HTML

There are some HTML and JavaScript files that I have. I've written some functions in my JavaScript file to save the values of different input fields. However, when I try to print the description, it just displays [object HTMLInputElement]. This mak ...

javascripthtml

Add HTML content dynamically to a layout that is connected to a controller

While I may not have the proper heading for this question, I need to add this piece of HTML dynamically to my layout and attach its click events with a controller. <div id="subscriber1" class="participant-video-list"> <div class="participant- ...

htmlangularjscontrollerbind

Bootstrap offers an improved method for arranging elements in columns and rows, especially when you need to omit certain ones

Is there a more efficient method for aligning elements using Bootstrap? Here is my current approach: <div className="row"> <div className="col-3 font-weight-bold"> Item Name ...

javascriptcssreactjsbootstrap-4react-bootstrap

margin around the masterpage

Currently, I am utilizing a master page in ASP.NET (using Visual Studio Express 2015) and overall everything is functioning properly. However, there seems to be an unsightly space around the edges when viewing it in a browser. While not a critical issue, ...

asp.nethtml

The steps to implement an onchange function for displaying image previews in a profile image tag

Within my code, there is a profile image tag along with an input tag for updating the image. I aim to implement a functionality that allows me to select a new image and automatically update the profile picture when it changes <div class="col-sm-6"> ...

javascriptphphtml

Consistently ensuring even horizontal CSS padding throughout all components

I'm working on a website using React and TailwindCSS. Each part of the site is its own React Component, but I want to make sure that all sections have consistent horizontal padding and a maximum width where the content stays centered and doesn't ...

cssreactjstailwind-css

Using JavaScript to set the value of an input text field in HTML is not functioning as expected

I am a beginner in the programming world and I am facing a minor issue My challenge lies with a form called "fr" that has an input text box labeled "in" and a variable "n" holding the value of "my text". Below is the code snippet: <html> <head&g ...

javascripthtmlinputassign

Tips for running multiple JavaScript functions in ASP.NET using Button's OnClientClick property

Is there a way to execute multiple JavaScript functions in ASP.NET to perform various tasks such as inserting a desired text in a TextBox, changing the TextBox background color and font color, and disabling or locking a Button for a specific duration? I ha ...

javascriptc#htmlasp.netvb.net

A problem arises when trying to showcase the content in a responsive manner on the hamburger menu, particularly when viewing on mobile

As a newcomer to web development, I decided to challenge myself by building an E-Commerce website to enhance my skills. To ensure mobile responsiveness, I opted for a hamburger menu to hide the navbar content. However, despite resizing working flawlessly, ...

javascripthtmlcssresponsive-designresponsive