Why doesn't a:hover work on an anchor without an href attribute?

In my application, I can't get the a:hover css style to work when my anchor tag doesn't have an href attribute.

Is there any reason for this?

From stackoverflow Shore

• Might not be the answer, but a:hover must occur after a:link and a:visited to be effective.

  See W3Schools

  From Matthew Jones

• IE doesn't support a:hover in a tag without href. You can use href="#" or href="Javascript:void(0);" however this last option probably won't work on IE6 either.

  Or use Javascript mouseover/mouseout.

  bendewey : +1 for href="#"

  Shore : But both IE and firefox have this issue.How ?

  bendewey : href="#" should ideally be canceled (and returned false) using javascript.

  tricat : try href="#" and see what happens. It might be something else such as inherited style or js overriding the behaviour.

  David HAust : +1 for href='Javascript:void(0);'. Worked perfect! My anchor is used to call a javascript function which toggles the visibilty of a

  tag and using href='#' was causing the page to _not_ maintain it's scroll position, so href='Javascript:void(0);' was a better solution for my purpose.

  From tricat

• Which browser are you using? This may be a quirk - certainly href isn't required I don't think, i.e. when using the legacy <a name> method to create links within the document.

  Shore : @Peter,both IE and firefox have this issue.
  From Peter

• The W3C CSS 2.0 specification for the :hover selector doesn't mention anything about requiring an href attribute.

  I suspect this is something implementation-specific, most likely IE being silly. If I remember right, Microsoft invented the :hover selector before it became part of the CSS standard, and it originally only applied to anchors. So yeah, it's probably a quirk of IE(6).

  A hacky fix for IE6 (all IE?) might be to use href="#" which just points to the current page (and thus does nothing).

  Shore : Yes,add href="anything" will absolutely make it normal.Feels odd.
  From Noldorin

• Hover is intended for links. Without the HREF the tag is simply an anchor.

  In other words...

  <a name="target"></a>
  

  is an ANCHOR within a page that...

  <a href="#target">go there</a>
  

  would be a LINK to.

  Since ANCHORs don't have visual representation on a page.. a :hover would be useless.

  Shore : You mean hover only works for links? But the above posts have said it's possible for hover to work by somehow. Do you have any reference link that proves it?

  Joe Davis : Here's a link to the W3C documentation. What I refer to as LINK and ANCHOR they refer to as SOURCE ANCHOR and DESTINATION ANCHOR, respectively. By default, all ANCHORS are DESTINATION ANCHORs (like bookmarks inside a page). It's the HREF attribute that turns the DESTINATION ANCHOR into a SOURCE ANCHOR (LINK). Since DESTINATION ANCHORs are not clickable links, adding a :hover just doesn't make sense.

  Joe Davis : Sorry... here's the link.... http://www.w3.org/TR/html4/struct/links.html

  Joe Davis : So you see... there are work-arounds... like href="#" (which points to the page itself since a DESTINATION ANCHOR name is not specified behind the #) or href="javascript:void(0);" which I do not recommend due to the fact that it's a violation of the unobtrusive JavaScript mantra that I try to live by.

  Ian Boyd : +1 for remembering that is an anchor. Wow, that takes me back 15 years...
  From Joe Davis

• Try adding DOCTYPE. IE tends to ignore certain directives without it. Specifically, :hover on an anchor tag fails without HREF in IE8 but works when the XHTML Transitional DOCTYPE is included.

  From Jay Igor