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

时间:2011-09-27 20:09:43

标签: javascript jquery html css

我通常使用<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+上注意到他们的按钮上有一个小动画,所以也许这就是为什么他们使用的

7 个答案:

答案 0 :(得分:3)

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

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

答案 1 :(得分:1)

你可以做<a href='#' onclick='return false;'>。 (感谢评论者!)

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

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

答案 2 :(得分:1)

使用div + jQuery IMO

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

答案 3 :(得分:0)

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

答案 4 :(得分:0)

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

答案 5 :(得分:0)

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

答案 6 :(得分:0)

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