<a> with :hover or <div> with hover event for buttons?

Question

I'm usually using an <a> to make block type buttons for example:

a
{
    color:#fff;
    display:block;
    background-color:#ff0000;
}

a:hover
{
    background-color:#c80000;
}

Then I put href="javascript:void(0);" on the <a> tag. I'm doing this because :hover on a div element is not good for backwards compatibility. This being said I was thinking originally to use as little JavaScript as possible but I'm starting to think doing this approach is not a great thing?

What would you guys use?

EDIT: I only bring this up because I noticed that Google+ was using for some of their buttons.

EDIT #2: I also noticed on Google+ they have a slight animation on their buttons, so maybe that's why they are using 's

Answer 1

div:hover will work on all browsers except Internet Explorer 6. But that browser is more than 10 years old.

The only downside of using div:hover in IE6 is that they won't get the hover effect, but they can still use (click) the button. So it won't break in IE6, just look a little bit different than in other browsers.

Answer 2

You could just do <a href='#' onclick='return false;'> . (Thanks commenters!)

You shouldn't feel constrained to use 'as little javascript as possible', but also I don't think javascript is necessary for this particular bit.

EDIT: in case I didn't answer your question directly, I don't think there's anything wrong with using <a> , <input> , or <button> , but I'd stay away from <div> if possible if only because it is not as semantically specific.

Answer 3

Use the div + jQuery IMO

$('.myDivClass').hover(
    function(){
        $(this).css('background-color','#c80000');
    }, function(){
        $(this).css('background-color','#ff0000');
});

Answer 4

I would recommend you use a div. Unless you need to go back to, say, IE 5-6 then it shouldn't be an issue.

Answer 5

Use whatever html element is semantically correct. If you are making buttons, why not use <button> ?

Answer 6

I use <a> 's quite often for this, actually. Every browser works with them, and it's usually just easier that way. Why use a div when you don't need to?

Answer 7

Using anchor gives your user ability to right-click on it and open link in another tab. Also if you want for search engines to follow links I'd leave 'a'. I usually use 'div' in case where it is dynamic behavior meaning its not simple redirect to different URL but some AJAX or DOM altering action.