[英]<a> with :hover or <div> with hover event for buttons?
I'm usually using an <a>
to make block type buttons for example: 我通常使用
<a>
来制作块类型按钮,例如:
a
{
color:#fff;
display:block;
background-color:#ff0000;
}
a:hover
{
background-color:#c80000;
}
Then I put href="javascript:void(0);"
然后我把
href="javascript:void(0);"
on the <a>
tag. 在
<a>
标记上。 I'm doing this because :hover
on a div
element is not good for backwards compatibility. 我这样做是因为
div
元素上的:hover
不利于向后兼容。 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? 话虽这么说,我本来是想尽可能少地使用JavaScript,但我开始认为采用这种方法不是一件好事吗?
What would you guys use? 你们会用什么?
EDIT: I only bring this up because I noticed that Google+ was using for some of their buttons. 编辑:我只是提出来,因为我注意到Google+的某些按钮正在使用。
EDIT #2: I also noticed on Google+ they have a slight animation on their buttons, so maybe that's why they are using 's 编辑#2:我还注意到在Google+上按钮上有一个轻微的动画,所以也许这就是为什么他们使用的
div:hover will work on all browsers except Internet Explorer 6. But that browser is more than 10 years old. div:hover可以在Internet Explorer 6以外的所有浏览器上运行。但是该浏览器已有10多年的历史了。
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. 在IE6中使用div:hover的唯一缺点是它们不会获得悬停效果,但是他们仍然可以使用(单击)按钮。 So it won't break in IE6, just look a little bit different than in other browsers.
因此它不会在IE6中中断,只是看起来与其他浏览器有些不同。
You could just do <a href='#' onclick='return false;'>
. 您可以执行
<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. 您不应该限制使用“尽可能少的javascript”,但我也不认为javascript对于此特定位是不必要的。
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. 编辑:如果我没有直接回答您的问题,我认为使用
<a>
, <input>
或<button>
并没有什么问题,但如果可能的话,我会尽量远离<div>
因为它不是语义上特定的。
Use the div + jQuery IMO 使用div + jQuery IMO
$('.myDivClass').hover(
function(){
$(this).css('background-color','#c80000');
}, function(){
$(this).css('background-color','#ff0000');
});
I would recommend you use a div. 我建议您使用div。 Unless you need to go back to, say, IE 5-6 then it shouldn't be an issue.
除非您需要返回到IE 5-6,否则这不是问题。
Use whatever html element is semantically correct. 使用任何在语义上正确的html元素。 If you are making buttons, why not use
<button>
? 如果要制作按钮,为什么不使用
<button>
呢?
I use <a>
's quite often for this, actually. 实际上,我经常使用
<a>
。 Every browser works with them, and it's usually just easier that way. 每个浏览器都可以使用它们,通常这样更容易。 Why use a div when you don't need to?
为什么在不需要时使用div?
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'.
另外,如果您想让搜索引擎跟随链接,我将保留“ 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.
我通常会在动态行为的情况下使用“ div”,这意味着它不是简单地重定向到其他URL,而是一些AJAX或DOM更改操作。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.