Correctly using empty <a> tags?

I was wondering how to do that, since I need the :hover pseudoclass and IE doesn't support it on anything else

If I want to create an empty "container" <a> tag how would I go about it?

<a href="javascript:none"> seems to do the trick but I was wondering if there were better ways!

 

You could name an object, typically done for specifying jump-link positions.

I'm not sure if this is considered wrong or hacky, but it would probably work:

<a name="foo">[object to which pseudoclass is to be applied]</a>

 

the point is that IE doesn't properly show the hover pseudoclass unless you specify the href attribute, but I don't really want the link to be clickable and to load another page, I just need the hover effect, so I used href="javascript:none" but I'm not sure it's the best way to do it :/

 

Ok. I'm been fortunate in the markup I've done that I've not needed to fool IE in this fashion.

You could negate the href by using href="#", and you could use cursor: pointer to create the illusion. If you want to get even fancier, you could use an IE conditional statement, which only serves up markup to IE:

So, your CSS could look like this:

.foo { cursor: pointer }
a.foo:hover, .bar:hover { whatever }

Code (markup):

and your page markup would look like this:

<!--[if IE]><a href="#" class="foo"><![endif]--><span class="bar">[OBJECT]</span><!--[if IE]></a><![endif]-->

Code (markup):