What is the best way to keep text from moving when hovering over it using CSS?

In my React app, I have implemented a category selector with flexbox styling to evenly space the category labels horizontally. I recently made some changes to the hover effects by increasing the font weight of the text on hover. However, this adjustment resulted in the surrounding labels shifting when one label is hovered over. Is there a solution to this issue where the hover effect only affects the font weight without causing any movement in the layout?

Below is the CSS code I am currently using:

.skills-category-selector {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-top: 12px;
}

.category-label {
    cursor: pointer;
    font-size: 20px;
    font-weight: 500;
}

.category-label:hover {
    font-weight: 800;
    text-decoration: underline;
}
javascripthtmlcssreactjs

Answer №1

If you want to enhance the boldness of text, try using the text-shadow property instead.

.skills-category-selector {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-top: 12px;
}

.category-label {
  cursor: pointer;
  font-size: 20px;
  font-weight: 500;
}

.category-label:hover {
  text-shadow: 1px 0 0 black;
  text-decoration: underline;
}
<div class="skills-category-selector">
  <span class="category-label">Category 1</span>
  <span class="category-label">Category 2</span>
  <span class="category-label">Category 3</span>
</div>

Answer №2

One effective solution that can be applied is to utilize pseudo-elements or set a specific width for each .category-label element as discussed in this resource.

.skills-category-selector {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-top: 12px;
}

.category-label{
  width: 20%;
  cursor: pointer;
  font-size: 20px;
  font-weight: 500;
}

.category-label:hover {
  font-weight: 800;
  text-decoration: underline;
}
<div class="skills-category-selector">
  <span class="category-label">Category 1</span>
  <span class="category-label">Category 2</span>
  <span class="category-label">Category 3</span>
  <span class="category-label">Category 3</span>
</div>

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

Utilizing jQuery for seamless transitions between multiple background images

Looking to create a dynamic page using jQuery that alternates between different large background images for a fading effect. How can I achieve this? ...

jqueryhtmlcss

How can I make the parent menu active in AngularJS when a submenu is selected?

I have set up the Menu and Submenu in the following way: <li> <a href="#/solution" ng-class="{ current: isActive('/solution') }" > <i class="halflings white home"></i> {{menu.home}} </a> < ...

cssangularjs

The correct way to link a separate CSS stylesheet called "stylesheet" to an HTML page is by using the proper syntax

How can you correctly link a CSS file called "stylesheet" to an HTML page when both files are located in the same directory? ...

htmlcss

Understanding the impact of event loop blocking and the power of asynchronous programming in Node JS

I am new to Node.js programming and I really want to grasp the core concepts and best practices thoroughly. From what I understand, Node.js has non-blocking I/O which allows disk and other operations to run asynchronously while JavaScript runs in a single ...

javascriptnode.jsasynchronousevent-loop

Is GridHelper in three.js creating a non-traditional grid?

I recently discovered that the standard normal vector for geometries in three.js is typically considered to be (0, 0, 1). However, when I tried using the GridHelper constructor, I noticed that it actually creates a plane defined by the X and Z axes, resul ...

javascriptthree.js

The parent node is returning a child element

Currently working on a website using Vue 3.0 and Element+ and encountering an inconsistency. There is a div displayed on the page (an array of objects) and the goal is to remove the object from the array when a button is clicked. The issue arises when som ...

javascripthtmlvue.js

Steps for sending an API request using the WSO2 Enterprise Service Bus

After carefully following the instructions provided in this tutorial, I attempted to invoke the API through the ESB using port 8280. However, I encountered error code 202 despite not specifying any fault sequence. I diligently followed each step and verif ...

javascriptjsonapiwso2wso2-esb

Retrieve the attributes of a class beyond the mqtt callback limitation

Currently, I am utilizing npm-mqtt to retrieve information from a different mqtt broker. My objective is to add the obtained data to the array property of a specific class/component every time a message is received. However, I'm facing an issue wher ...

javascriptangulartypescriptscopemqtt

Why am I unable to access data properties from the Vue object in VueJs3? This was possible in Vue2

My Journey from Vue 2 to Vue 3 Having been a loyal user of Vue 2 for quite some time, I recently decided to embark on the journey of exploring Vue 3 in order to convert our existing website. As part of this conversion process, I made the decision to utili ...

javascriptvue.jsvuejs3

CSS has the ability to override the height and width of images

<img src="img_beach.jpg" alt="Beach" width="800" height="600"> In my HTML body tag, the line above is what I have. However, the specified height and width are being replaced by the values set for the image in the stylesheet. What could be causing t ...

htmlcss

Is there a problem with using p:first-child when there is an img tag right after the p tag?

Greetings, I am having trouble getting this to work properly: .body-post p:first-child:first-letter { font-size:240%; } and here is the HTML code: <div class="body-post"> <p><img src="http://#" align="left" style=" ...

htmlcssimage

What is the hoverColor property for the MenuItem component in Material-UI?

I've been researching: https://github.com/callemall/material-ui/blob/master/src/styles/getMuiTheme.js as well as http://www.material-ui.com/#/customization/themes However, I can't seem to find the answer to my question. My goal is simply to c ...

reactjsmenumenuitemmaterial-ui

AngularJS enables box to smoothly slide up and down when hovered over

I am attempting to create a div that will overlay an image on hover with a slide up and slide down effect. Can anyone provide guidance on how to achieve this without relying on jQuery? I would prefer to utilize only AngularJS in my application. Here is a ...

javascriptjquerycssangularjs

JavaScript will continue to process the submit to the server even after validation has been completed

My current challenge involves implementing form validation using JavaScript. The goal is to prevent the form from being sent to the server if any errors are found. I have made sure that my JavaScript function returns false in case of an error, like so: ...

phpjavascripthtmlvalidation

Retrieve the JSON data from an AJAX request

I am a beginner in the world of AJAX and JavaScript. In one of my projects, I need to retrieve a JSON object in my JavaScript file. I have utilized spray-json library which displays the JSON object at this URL: http://localhost:8081/all-modules { "statu ...

javascriptjqueryajaxjsonspray-json

Circular dependency situation encountered in Angular 2 shared module

I'm currently working on a share module setup that is structured as follows: @NgModule({ exports: [ CommonModule, HttpModule, OneModule, TwoModule ] }) export class SharedModule { } The OneModule imports the SharedModule in order ...

javascriptangular

The Nestjs cronjob is having trouble accessing the injected service

After setting up a cronjob to call a service from another module, I encountered an issue where the console logged items were displaying correctly when running the method manually from the endpoint. However, once I added back the cronjob decorator, the serv ...

javascriptnode.jscronnestjs

Display the focus state of ReactJS Material UI Autocomplete component by default

The Material UI autocomplete component has a stylish design when the input field is focused. You can see this on the linked page. Is it possible to set this focus state as default? In other words, can the component be loaded with this state regardless of ...

javascriptreactjsmaterial-designmaterial-ui

Unable to render Google map on Vue CLI component

I am currently using the google map api to develop a basic application with vue.js. Interestingly, when I utilize a simple html and javascript setup with the api key, everything runs smoothly. However, once I transition the same process to vue, the map fai ...

javascriptvue.jsgoogle-maps-api-3

Using Regular Expressions in JavaScript for Filtering with Angular.js

I am looking to create a custom filter in Angular.js. When an object has a name == null, and I add "u" to the filter->, it results in the return of the object where name == null because re.test(null)=true. However, other characters are returning false. ...

javascriptangularjs