<p> <input type="submit" value="提交" autofocus onmouseover="this.style.background='grey'" onmouseout="this.style.background='pink'" /> <input type="reset" value="重置" onmouseover="this.style.background='grey'" onmouseout="this.style.background='pink'" /> </p >加入jQuary完成按钮背景颜色改变
时间: 2023-07-06 10:24:19 浏览: 86
可以使用以下代码将 jQuery 添加到您的 HTML 文件中:
```
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
```
然后,您可以使用以下代码将 HTML 元素添加到您的 HTML 文件中:
```
<script>
$(document).ready(function() {
$('input[type="submit"]').mouseover(function() {
$(this).css('background', 'grey');
}).mouseout(function() {
$(this).css('background', 'pink');
});
$('input[type="reset"]').mouseover(function() {
$(this).css('background', 'grey');
}).mouseout(function() {
$(this).css('background', 'pink');
});
});
</script>
```
这将为 `type` 为 `submit` 和 `reset` 的输入元素添加鼠标悬停事件,当鼠标悬停在输入元素上时,背景颜色将更改为灰色,当鼠标移出输入元素时,背景颜色将更改为粉色。您可以根据需要更改选择器和颜色。
相关问题
<p> <input type="submit" value="提交" autofocus/> <input type="reset" value="重置"/> </p >添加js
你可以在HTML文档的<head>标签内添加以下代码来实现对提交按钮和重置按钮的JS事件绑定:
```
<script type="text/javascript">
window.onload = function() {
var submitBtn = document.querySelector('input[type="submit"]');
var resetBtn = document.querySelector('input[type="reset"]');
submitBtn.addEventListener('click', function(event) {
// 这里可以编写提交按钮的点击事件处理逻辑
});
resetBtn.addEventListener('click', function(event) {
// 这里可以编写重置按钮的点击事件处理逻辑
});
};
</script>
```
在这段代码中,我们使用了`querySelector`方法来获取提交按钮和重置按钮的DOM元素,并使用`addEventListener`方法对它们分别绑定了`click`事件处理函数。当按钮被点击时,对应的事件处理函数将会被调用,你可以在这里编写具体的逻辑代码来处理提交和重置按钮的点击事件。
<p> <input type="submit" value="提交" autofocus/> <input type="reset" value="重置"/> </p >美化按钮样式
你可以在CSS中为按钮添加样式来美化它们。例如,你可以使用以下CSS代码来添加圆角和阴影效果:
```css
input[type="submit"], input[type="reset"] {
border-radius: 5px;
box-shadow: 2px 2px 5px #888888;
background-color: #4CAF50;
color: white;
font-size: 16px;
padding: 10px 20px;
cursor: pointer;
}
```
这将给提交和重置按钮添加绿色背景、白色文本、圆角和阴影效果。你可以根据需要更改这些值。
阅读全文