ZBLOG

@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; ...

要实现当鼠标移到选项时,选项的背景色变蓝色,你可以通过添加一些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助手提供,问题来源于学员提问

本站部分文章来源于网络,版权归原作者所有,如有侵权请联系站长删除。
转载请注明出处:https://sdn.0voice.com/?id=2220

分享:
扫描分享到社交APP
上一篇
下一篇
发表列表
游客 游客
此处应有掌声~
评论列表

还没有评论,快来说点什么吧~

联系我们

在线咨询: 点击这里给我发消息

微信号:3007537140

上班时间: 10:30-22:30

关注我们
x

注册

已经有帐号?