<input name="btn" type="submit" value="登录" class="outStyle" />鼠标放在上面让他变颜色
时间: 2023-11-21 11:58:35 浏览: 30
你可以使用CSS来实现鼠标悬停时改变按钮颜色的效果。可以通过:hover伪类选择器来实现。以下是一个示例代码:
```html
<style>
.outStyle {
background-color: #ccc; /* 设置默认背景颜色 */
color: #fff; /* 设置默认字体颜色 */
border: none; /* 去掉默认边框 */
padding: 10px 20px; /* 设置内边距 */
}
.outStyle:hover {
background-color: #f00; /* 设置悬停时背景颜色 */
color: #000; /* 设置悬停时字体颜色 */
cursor: pointer; /* 设置鼠标悬停时的光标形状 */
}
</style>
<input name="btn" type="submit" value="登录" class="outStyle" />
```
在上面的代码中,我们首先定义了一个名为.outStyle的类,用于设置按钮的默认样式。然后使用:hover伪类选择器来设置鼠标悬停时的样式。最后将类应用到按钮上。
相关问题
<form action="shopinsert.jsp"> 商品编号:<input type="text" name="id" placeholder="选填"/> 商品名称:<input type="text" name="name" /><br> 商品价格:<input type="text" name="price" /> 所属店铺:<input type="text" name="detail" /><br> 详细信息:<input type="text" name="info" /><br><br> <input type="submit" value="添加" />如何美化这段代码
你可以使用 CSS 样式来美化这段代码,例如:
```html
<form action="shopinsert.jsp" class="my-form">
<div class="form-group">
<label for="id">商品编号:</label>
<input type="text" name="id" id="id" placeholder="选填" class="form-control" />
</div>
<div class="form-group">
<label for="name">商品名称:</label>
<input type="text" name="name" id="name" class="form-control" />
</div>
<div class="form-group">
<label for="price">商品价格:</label>
<input type="text" name="price" id="price" class="form-control" />
</div>
<div class="form-group">
<label for="detail">所属店铺:</label>
<input type="text" name="detail" id="detail" class="form-control" />
</div>
<div class="form-group">
<label for="info">详细信息:</label>
<input type="text" name="info" id="info" class="form-control" />
</div>
<div class="form-group">
<input type="submit" value="添加" class="btn btn-primary" />
</div>
</form>
```
```css
.my-form {
max-width: 500px;
margin: 0 auto;
padding: 20px;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 5px;
}
.form-group {
margin-bottom: 10px;
}
label {
display: inline-block;
width: 120px;
font-weight: bold;
color: #333;
}
.form-control {
width: 300px;
padding: 8px;
border: 1px solid #ccc;
border-radius: 5px;
}
.btn {
padding: 8px 16px;
border: none;
border-radius: 5px;
color: #fff;
background-color: #007bff;
}
.btn:hover {
background-color: #0069d9;
}
```
这样就可以使表单更加美观和易读,同时也方便修改样式。
<input name="" type="submit" class="btn_b_login" value="登录">怎么跳转
根据提供的引用内容,无法确定如何跳转。但是,可以通过以下代码示例来演示如何使用JavaScript在单击按钮时跳转到另一个页面:
```html
<button onclick="window.location.href='http://www.example.com'">跳转到Example网站</button>
```
在这个例子中,当用户单击按钮时,JavaScript代码将使用`window.location.href`将页面重定向到指定的URL。你可以将URL更改为你想要跳转的任何网站。