HTML Object blocking clicks

Design help Custom code
1

I’ve got a sticky animated logo, which is an animated SVG I made in Keyshape. I implemented this as an HTML OBJECT. Now the client has requested that the logo be clickable. So I made the div a link object, but the problem is that the HTML OBJECT blocks the clicks and also hides the mouse cursor.

so I wrapped the HTML object in a SPAN and then added this class to the SPAN.

.overlay {
    height:0px;
    overflow:visible;
    pointer-events:none;
    background:none !important;
}

So the problem is that the code works, but because of pointer-events:none; my mouse cursor is disappearing instead of showing a pointer hand icon.

Can anyone think of a more elegant way of solving this?

Here is my site Read-Only: [https://preview.webflow.com/preview/coronation-sped-up?utm_medium=preview_link&utm_source=designer&utm_content=coronation-sped-up&preview=b81a2416a229496a0de806285abf17a9&mode=preview[1]
(how to share your site Read-Only link)

2

I’ve figured out an extremely simple solution, I just put an absolutely positioned div on top and make that a link block.

1 Like