Jump to content

Weird H1 behavior on hover

Recommended Posts

Hi,

I'm seeing a strange issue with mouseover/hover on H1 blocks on a client's page (video attached).

When you hover over the text, the expected result is for each of the H1s (Idealism, Integrity, Imagination) to transition to a different color, which it does. But what you can see in the video is that each hover is also producing some weird additional blocks (extending the uppercase "I"s, the height of the periods, producing a line just over "m" and first "a" in "Imagination".

The client is using LESS for their CSS, but the class that controls this section is nothing too complicated:

.right-text-container {
  margin-top: -2vw;

  h1 {
    font-family: "Helvetica Neue";
    font-weight: bold;
    margin: 0;
    .font-size(84 * @PT);
    .line-height(97 * @PT);
    text-align: right;
    letter-spacing: -0.025em;
    cursor: pointer;
    transition: color 0.25s ease-in-out;

    &.hover:nth-child(1):hover {
      color: #839b99 !important;
    }
    &.hover:nth-child(2):hover {
      color: #d3b64f !important;
    }
    &.hover:nth-child(3):hover {
      color: #c84d26 !important;
    }
  }
}

Another couple strange things:

  • It seems to only happen in Google Chrome
  • It only happens over a certain desktop with (if I reduce the width of the browser window, it goes away)

Has anyone seen something like this before?

Thanks!

Link to comment
  • Replies 1
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

You should give the url so we can check

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.