不一样的clas
时间: 2023-11-06 13:04:06 浏览: 59
以下是一个不一样的class样式,可以实现鼠标悬停时改变字体颜色和背景颜色:
HTML代码:
```html
<button class="my-button different">Click me!</button>
```
CSS代码:
```css
.my-button {
background-color: #4CAF50; /* 设置背景颜色 */
border: none; /* 去掉边框 */
color: white; /* 设置文字颜色 */
padding: 10px 20px; /* 设置内边距 */
text-align: center; /* 文字居中 */
text-decoration: none; /* 去掉下划线 */
display: inline-block; /* 设置为行内块级元素 */
font-size: 16px; /* 设置字体大小 */
border-radius: 5px; /* 圆角 */
transition-duration: 0.4s; /* 过渡动画时间 */
cursor: pointer; /* 设置为手型光标 */
}
.my-button:hover {
background-color: #3e8e41; /* 鼠标悬停时的背景颜色 */
}
.different:hover {
color: #3e8e41; /* 鼠标悬停时的字体颜色 */
}
```
在HTML代码中,我们给button元素添加了两个class,一个是之前的my-button,另一个是新添加的different。
在CSS代码中,我们给.different:hover添加了一个额外的样式,即鼠标悬停时字体颜色变成了#3e8e41。这样就实现了在不同的button中使用不同的样式。