Jump to content

When I add <a href> to code blocks it breaks my homepage

Recommended Posts

Site URL: https://dragonfly-pentagon-ym6h.squarespace.com/

site password is 123

I used code blocks to create a mouse hover-over effect on the three top images on my homepage. When I add, let's say 

<a href="https://dragonfly-pentagon-ym6h.squarespace.com/directory"> (or any other link to any other of these images) so that when you click on the blue image, it goes to the directory page, the click area seems to expand to the section below so no matter where my mouse is, any click will act as if I've clicked that hyperlink. It also increases the size of the section below.

What gives?

Here's the code I used for each of these code blocks:

<a href="https://dragonfly-pentagon-ym6h.squarespace.com/directory">
<img src="https://static1.squarespace.com/static/6238af5e19bb205556416810/t/625345f3de22634c0986fa0d/1649624563271/searchVectorPart1.png
" onmouseover="this.src='https://static1.squarespace.com/static/6238af5e19bb205556416810/t/625344a058497c282010c687/1649624224879/searchVectorsecond.png'" onmouseout="this.src='https://static1.squarespace.com/static/6238af5e19bb205556416810/t/625345f3de22634c0986fa0d/1649624563271/searchVectorPart1.png'">


Edited by OzzyH
Link to comment


Your a tag missing closing tag

If you use <a> you need to add a closing </a>

<a href="https://dragonfly-pentagon-ym6h.squarespace.com/directory">
<img src="https://static1.squarespace.com/static/6238af5e19bb205556416810/t/625345f3de22634c0986fa0d/1649624563271/searchVectorPart1.png" onmouseover="this.src='https://static1.squarespace.com/static/6238af5e19bb205556416810/t/625344a058497c282010c687/1649624224879/searchVectorsecond.png'" onmouseout="this.src='https://static1.squarespace.com/static/6238af5e19bb205556416810/t/625345f3de22634c0986fa0d/1649624563271/searchVectorPart1.png'">


Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

For those interested elements without closing tags are known as empty elements. As @tuanphan points out the a tag is not one of them. Not closing non-empty tags can produce very odd page renderings!

There is a list of allowed empty elements on MDN.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

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.