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