Question

我通常使用<a>制作块类型按钮，例如：

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

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

然后我将href="javascript:void(0);"放在<a>标记上。我这样做是因为:hover元素上的div不利于向后兼容性。这就是说我原本想用尽可能少的JavaScript，但我开始认为做这种方法不是一件好事吗？

你们会用什么？

修改我之所以提起这件事，是因为我注意到Google+正在使用他们的一些按钮。

编辑＃2： 我也在Google+上注意到他们的按钮上有一个小动画，所以也许这就是为什么他们使用的

Answer 1

div：hover将适用于除Internet Explorer 6之外的所有浏览器。但该浏览器已超过10年。

使用div的唯一缺点：在IE6中悬停是他们不会获得悬停效果，但他们仍然可以使用（点击）按钮。因此它不会在IE6中破坏，只是看起来与其他浏览器略有不同。

Answer 2

你可以做<a href='#' onclick='return false;'>。（感谢评论者！）

你不应该觉得限制使用'尽可能少的javascript'，但我也不认为javascript对于这个特定的位是必要的。

编辑：如果我没有直接回答您的问题，我认为使用<a>，<input>或<button>没有任何问题，但我会留下来如果可能的话，远离<div>，只因为它不具有语义特异性。

Answer 3

使用div + jQuery IMO

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

Answer 4

我建议你使用div。除非你需要回到IE 5-6，否则它应该不是问题。

Answer 5

使用任何html元素在语义上是正确的。如果您正在制作按钮，为什么不使用<button>？

Answer 6

实际上我经常使用<a>。每个浏览器都可以使用它们，通常这种方式更容易。为什么在不需要的时候使用div？

Answer 7

使用锚点可让您的用户右键单击它并在另一个标签页中打开链接。此外，如果你想让搜索引擎关注链接，我会留下'a'。我通常使用'div'，如果它是动态行为，意味着它不是简单的重定向到不同的URL，而是一些AJAX或DOM改变动作。

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

7 个答案: