Member Avatar for chaitu11

How to hide onmouseover status of an anchor tag

When we mouseover on edit link we get some link like this index.php?editid=1;

so how to hide this on mouseover

  • 3 Contributors
  • 3 Replies
  • 191 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by Troy III

Dani AI

Generated

Short answer: you cannot reliably stop a browser from showing the target of a normal link on hover. Modern user agents ignore attempts to overwrite the status line (the old window.status trick) so client-side hacks are brittle and inconsistent; a determined user can always inspect the page or network calls. (developer.mozilla.org)

If the goal is purely visual (avoid showing the URL on hover), use an element that is not an <a href="..."> and perform navigation in script. A recommended, accessible pattern is a real <button> styled as a link (buttons are keyboard-operable by default and do not display a hover URL). Example:

<button type="button" class="linklike" data-url="/edit/1" aria-label="Edit item">Edit</button>

<script>
document.addEventListener('click', function (e) {
  const b = e.target.closest('button[data-url]');
  if (!b) return;
  window.location.href = b.getAttribute('data-url');
});
</script>

Use a form + POST if you want to avoid query strings in the visible URL (and reduce leakage to logs/history):

<form action="/edit" method="post">
  <input type="hidden" name="id" value="1">
  <button type="submit">Edit</button>
</form>

For accessibility notes and how to re-create link semantics on non-<a> elements, see ARIA guidance — if you replace a link you must reimplement focus/keyboard behavior and consider the loss of native context-menu actions (open in new tab, copy link). (developer.mozilla.org)

If the concern is security or hiding internal IDs, do it server-side: map opaque tokens to internal IDs, require server-side authorization, or use POSTs for sensitive operations. Never trust client-side hiding as a security control — avoid putting secrets or sensitive identifiers in URLs. (owasp.org)

Practical recommendation for this thread: if you only care about the hover text, convert the edit control to a properly labeled <button> (test keyboard + screen reader behaviour). If you care about hiding an internal ID, redesign the link to use server-side mapping/tokens and enforce authorization. Both and ’s points about client-side limits and usability trade-offs are on point — pick the approach that matches whether your problem is cosmetic or security-sensitive.

Sources: MDN: Window.status, StackOverflow discussion on hiding link status, MDN ARIA link role, MDN <a> element, OWASP WSTG – sensitive info in URLs.

Recommended Answers

All 3 Replies

Member Avatar for JorgeM

maybe something like this...

<!DOCTYPE html>
<html>
<head>
 <title>Demo</title>
</head>
<body>

<a href="javascript:void(0)" onclick="myFunction('http://www.google.com')">Google</a>

<script>
function myFunction(url)
{
   window.open(url);
}
</script>

</body>
</html>

This is just one idea. I'm sure that you get the idea here and can come up with something more specific for your needs.

Member Avatar for JorgeM

Of course, none of these client side techniques prevent a user from right clicking in their browser and viewing source. If you truly want to hide the URL from the end user, you'll have to handle that server side.

Member Avatar for Troy III

that will only replace the:

index.php?editid=1;

with:

"javascript:void(0)"

when the link is hovered.

I also am of an opinion that this kind of things should not be allowed.
The client has the right to know the link value before clicking on it at all times and without having to take any further actions other than hovering.

Edited by Troy III
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.