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?
views:
766answers:
6
+1
A:
Might not be the answer, but a:hover must occur after a:link and a:visited to be effective.
See W3Schools
Matthew Jones
2009-06-24 20:54:13
+4
A:
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.
tricat
2009-06-24 20:54:57
+1 for href="#"
bendewey
2009-06-24 20:57:43
But both IE and firefox have this issue.How ?
Shore
2009-06-24 21:00:40
href="#" should ideally be canceled (and returned false) using javascript.
bendewey
2009-06-24 21:02:05
try href="#" and see what happens. It might be something else such as inherited style or js overriding the behaviour.
tricat
2009-06-24 21:07:27
+1 for href='Javascript:void(0);'. Worked perfect!My anchor is used to call a javascript function which toggles the visibilty of a <div> 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.
David HAust
2009-08-04 00:30:26
A:
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.
Peter
2009-06-24 20:55:22
A:
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).
Noldorin
2009-06-24 20:57:48
+1
A:
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.
Joe Davis
2009-06-24 20:59:05
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?
Shore
2009-06-24 21:07:23
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
2009-06-24 21:21:43
Sorry... here's the link....http://www.w3.org/TR/html4/struct/links.html
Joe Davis
2009-06-24 21:22:20
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.
Joe Davis
2009-06-24 21:25:24
+1 for remembering that <A> is an anchor. Wow, that takes me back 15 years...
Ian Boyd
2009-06-25 00:16:08
A:
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.
Jay Igor
2009-06-25 00:11:07