I have a link that will consist on of 1 image and nothing else. I also need this image to highlight when user hovers over it. I was thinking: use <a> tag and set its height, width and background-image properties in CSS. However, (and I’ve had a feeling it might do that) the <a> tag’s size when rendered in browser is 0x0. I can include a couple of characters between the link tag (and the image shows up ok) but it feels a bit hacky. I was also thinking to use the old trick of 1px transparent image set to the correct size – but this also seems less than correct way of doing it. I also can do the same thing with jQuery (but this seems like trying to kill a fly with a sledge hammer).
Is there an alternative pure CSS/HTML way of achieving this?
Set it to
display:block;, by default a tags are set to display inline. You can then set width and height.By changing the background-position on hover, or changing the background-image, you can do the rollover.