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
  • Views 233
  • Created
  • Last Reply

You should give the url so we can check

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.