Hovering <a> in CSS without href

Question

I need a picture to change upon hovering over it. I got that working in CSS by changing the z-index upon hovering over it. However, I don't want anyone to click on it. Thus, I have removed the href from the tag. I have heard that this is a problem for IE6, however I have read that such is within the specifications of even XHTML, which is what my code validates in. So, is there a work-around for IE6 for the lack of an href? Does anyone on here have IE6 that can test this and see if it's really a problem?

Answer 1

Maybe u should

href="#"

and change cursor from "hand" to normal "pointer" ;)

Answer 2

It works on IE 6, although if you do not have the PNG fix script, it will still work, but the background of your image with be a shade of blue. Just make sure you change the cursor, to "default", instead of the hand cursor. This has been an issue on some websites, and browsers, with the change of a cursor.

Answer 3

Another thing you could do is to use background in css + anchor tag to display that hover effect:

<style>
    a#test{
     background:#ff0000;
    }
    a#test:hover{
     background:#0000ff;
    }
</style>
<a id="test" href="#" style="width:100px;height:100px;display:block;" >test</a>

That will make one square with red background and when you hover over it background will be blue. Ofc you can put background-image there and images will change... :)

Answer 4

try giving it a name attribute

<a name="changingimage">...</a>

Answer 5

IE6 supports :hover only on links (see :link pseudo-class) and thus require a href attribute. Otherwise, if the href attribute is missing, it’s not a link according to :link.

So you either specify a href to create a link or use JavaScript to simulate that behavior.

Answer 6

Use javascript void function

text

Will do exactly u want.