friz Posted November 4, 2020 Share Posted November 4, 2020 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! Weird behavior on hover.mp4 Link to comment
Beyondspace Posted November 5, 2020 Share Posted November 5, 2020 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 HighlighterIf 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment