Java-Scripts.net

Link Highlight

Simple visual feedback. This script uses JavaScript event handlers to dynamically modify the font properties of a link while the cursor is active.

Hover to Bold Hover to Bold Hover to Bold

Copy the Script

<script>
function highlight(el) {
    el.style.fontWeight = "bold";
    el.style.color = "red";
}

function unhighlight(el) {
    el.style.fontWeight = "normal";
    el.style.color = "";
}
</script>

<a href="#" onmouseover="highlight(this)" onmouseout="unhighlight(this)">Link</a>

Frequently Asked Questions

CSS is always faster and cleaner. However, this JavaScript method is useful if you need to apply complex logic, such as only highlighting links that point to external domains.

Yes. Making text `bold` increases its width, which can cause surrounding text to jump. To avoid this, use `text-shadow` or a `border-bottom` highlight instead.

Yes. The script can be applied inline to specific `` tags or looped through a specific container ID.