如何为input[type=button]添加hover效果并解决光标异常、hover失效问题

嘿，我来帮你排查这个问题！你的hover效果不生效和光标没变化的问题，主要是CSS的小错误导致的，和onclick代码没关系，完全不需要修改它~

1. hover效果不生效的核心原因 #

你的CSS属性选择器语法写错了！正确的属性选择器格式是[属性名="属性值"]，但你写成了input[type: "button"]——把冒号改成等号，浏览器才能识别到要应用hover样式的元素。修正后的选择器应该是：

input[type="button"]:hover { background-color: green; }

2. 鼠标悬停光标不变的问题 #

默认情况下，input[type="button"]的光标是箭头样式，不符合按钮的交互预期。你只需要给按钮添加cursor: pointer;样式，就能让鼠标悬停时显示指针光标。可以把这个样式加到#b1的规则里：

#b1 { 
  font-size: 20px; 
  border-radius: 30px;
  cursor: pointer; /* 让鼠标悬停时显示指针光标 */
}

3. 关于onclick代码的说明 #

这段内联点击事件代码本身是有效的，点击按钮会正常跳转到指定地址，它和hover效果、光标变化没有任何关联，所以不用修改它。如果追求更现代的前端写法，你可以用addEventListener代替内联onclick，但这不是解决当前问题的必要操作。

修正后的完整代码示例 #

#b1 { 
  font-size: 20px; 
  border-radius: 30px;
  cursor: pointer;
}
input[type="button"]:hover { 
  background-color: green; 
}

<form>
  <input id="b1" type="button" value="LogIn" onclick="window.location.href='http://www.facebook.com/'" />
</form>

这样修改后，鼠标悬停按钮时，背景会变成绿色，光标也会变成指针样式啦~

内容的提问来源于stack exchange，提问作者Raihan Arefin