css – 如何在鼠标悬停时设置“提交”输入的样式,单击?

前端之家收集整理的这篇文章主要介绍了css – 如何在鼠标悬停时设置“提交”输入的样式,单击?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我需要设置两个不同的输入样式,以便在鼠标悬停和点击时显示不同,就像按钮一样.通常我会用按钮;但是,其中一个是输入类型=“重置”,我认为使用输入比编写表单重置脚本更简单.
对于鼠标悬停和单击,一种样式如何输入“提交”和“重置”类型?

解决方法

假设你的意思是CSS而不是 JavaScript方法,你可以使用伪类:
input[type=reset],/* CSS2.1 attribute-equals selector */
#resetButtonID,.resetButtonClass-Name {
    /* the reset button */
}

input[type=reset]:hover,#resetButtonID:hover,.resetButtonClass-Name:hover {
    /* the reset button when hovered over */
}

input[type=reset]:active,#resetButtonID:active,.resetButtonClass-Name:active {
    /* the reset button when mouse-down */
}

input[type=reset]:focus,#resetButtonID:focus,.resetButtonClass-Name:focus {
    /* the reset button when focussed by keyboard-navigation */
}

JS Fiddle demo.

猜你在找的CSS相关文章