要实现当鼠标移到选项时,选项的背景色变蓝色,你可以通过添加一些CSS样式来修改代码。具体做法如下:
在 .select
样式中添加以下代码:
.select select option:hover {
background-color: blue;
color: white;
}
这将使鼠标悬停在选项上时,选项的背景色变为蓝色,并且文字颜色变为白色。
最终的 CSS 代码应该是这样的:
@charset "UTF-8";
:root {
--background: linear-gradient(90deg, #edf3ff 9%, #ecf6ff 80%);
--background-select: #fff;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
display: grid;
place-content: center;
min-height: 100vh;
background: var(--background);
color: #f39c12;
}
/* Reset <select> defaults */
select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: 0;
outline: 0;
background: none;
}
select::-ms-expand {
display: none;
}
/* Custom Select wrapper */
.select {
position: relative;
...
.select select option:hover {
background-color :blue ;
color :white ;
}
这样,在鼠标移到选项时,选项的背景色就会变成蓝色。
内容由零声教学AI助手提供,问题来源于学员提问