select下拉框鼠标经过时改变option背景颜色
时间: 2023-11-21 11:04:49 浏览: 212
可以通过CSS的:hover伪类来实现下拉框鼠标经过时改变option背景颜色的效果。
首先,需要给select和option元素设置对应的样式:
```css
select {
/* 设置select的样式 */
}
option {
/* 设置option的样式 */
}
```
然后,使用:hover伪类来设置鼠标经过时的样式:
```css
option:hover {
background-color: #ccc;
}
```
完整的代码如下:
```html
<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
</select>
<style>
select {
width: 200px;
padding: 5px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 5px;
}
option {
padding: 5px;
}
option:hover {
background-color: #ccc;
}
</style>
```
效果如下图所示:
![select下拉框鼠标经过时改变option背景颜色效果图](https://i.imgur.com/5ZfLSDH.png)