Example – previewing a link with a <a> element

In our first example, we will explore how to progressively enhance a <a> element to display a preview when hovered upon.

Here, the browser receives HTML that contains a <a> tag with a href attribute, like this:

<a href="..." />

It then creates a hyperlink. When you click on the hyperlink, the browser will navigate to the destination specified in the href attribute.

This is the default behavior of the <a> element.

As the user loads the JavaScript, we want to make the <a> element do more than just navigate to a new location.

We are going to enhance the <a> element by having it show the destination location when hovering over it.

To do that, we are going to create a preview action and use it on the <a> element:

<script>
  function preview(element) {
  }
</script>
<a href="..." use:preview>Hello</a>

...