Question 259290 in Html Question posted in
Some basic documentation can be found here.

Html – shifting of elements due to hover

I am creating a div in which elements are stacked on each other. The font-weight changes when I hover on the anchor tags in the div. The problem is, when the font-weight changes, it is shifting other elements as well. This is giving a very wobbly feeling to my div. what changes should I make to change the font-weight but not cause other elements to move. I am attaching part of my code for the same

.discount{
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    margin-left: 2%;
    margin-right: 2%;
    margin-top: 100px;
}

.discount a{
    margin-bottom: 5px;
    position: relative;
    font-weight: 400; /* Set the normal font weight */
}

.discount a:hover {
    font-weight: 700; /* Set the font weight on hover */
}
<div class="discount">
      <a href="">Discount1</a>
      <a  style="margin-bottom: 20px;" href="">Discount2</a>
      <a href="">Discount3</a>
      <a  style="margin-bottom: 20px;" href="">Discount4</a>
      <a href="">Discount4</a>
    </div>
Tags:

2

Answers


  1. 0

    There’s a few things you could try to get around this issue.

    1. Don’t change the font weight

    Changing font weight is essentially like using a different font so unfortunately, things will move. I know this sounds like it’s avoiding the problem entirely but could you try animating opacity on hover instead so that the text goes from #000C to #000F to make it pop instead of font weight?

    2. Static set the width

    If your issue is the size of the container changing then you could set the width and/or height to a fixed amount to avoid it growing or shrinking when the font is changed.

    3. Cheat by having 2 overlapping elements

    Have 2 elements for each link; one behind the other and then fade the front link to reveal a link with the same text behind it with a thicker font weight behind it.

    Login or Signup to reply.
  2. 0

    When you’re changing font-weight, the line-height may change as well (it depends on the actual font). That may cause element’s height grow/shrink and vertically shift other elements. To avoid that, you might want to fix the line-height:

    .discount {
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  margin-left: 2%;
  margin-right: 2%;
  margin-top: 100px;
}

.discount a {
  line-height: 1.25rem; /* HERE */
  margin-bottom: 5px;
  position: relative;
  font-weight: 400;
  /* Set the normal font weight */
}

.discount a:hover {
  font-weight: 700;
  /* Set the font weight on hover */
}
    <div class="discount">
  <a href="">Discount1</a>
  <a style="margin-bottom: 20px;" href="">Discount2</a>
  <a href="">Discount3</a>
  <a style="margin-bottom: 20px;" href="">Discount4</a>
  <a href="">Discount4</a>
</div>

    Another option would be adding text-shadow instead of changing font-weight. This approach eliminates both vertical and horizontal grow/shrink:

    .discount {
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  margin-left: 2%;
  margin-right: 2%;
  margin-top: 100px;
}

.discount a {
  margin-bottom: 5px;
  position: relative;
  font-weight: 400;
  /* Set the normal font weight */
}

.discount a:hover {
  text-shadow: -.5px -.5px, .5px .5px;
}
    <div class="discount">
  <a href="">Discount1</a>
  <a style="margin-bottom: 20px;" href="">Discount2</a>
  <a href="">Discount3</a>
  <a style="margin-bottom: 20px;" href="">Discount4</a>
  <a href="">Discount4</a>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search