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 样式中添加以下代码:

  1. .select select option:hover {
  2. background-color: blue;
  3. color: white;
  4. }

这将使鼠标悬停在选项上时,选项的背景色变为蓝色,并且文字颜色变为白色。

最终的 CSS 代码应该是这样的:

  1. @charset "UTF-8";
  2. :root {
  3. --background: linear-gradient(90deg, #edf3ff 9%, #ecf6ff 80%);
  4. --background-select: #fff;
  5. }
  6. *,
  7. *::before,
  8. *::after {
  9. box-sizing: border-box;
  10. }
  11. body {
  12. display: grid;
  13. place-content: center;
  14. min-height: 100vh;
  15. background: var(--background);
  16. color: #f39c12;
  17. }
  18. /* Reset <select> defaults */
  19. select {
  20. -webkit-appearance: none;
  21. -moz-appearance: none;
  22. appearance: none;
  23. border: 0;
  24. outline: 0;
  25. background: none;
  26. }
  27. select::-ms-expand {
  28. display: none;
  29. }
  30. /* Custom Select wrapper */
  31. .select {
  32. position: relative;
  33. ...
  34. .select select option:hover {
  35. background-color :blue ;
  36. color :white ;
  37. }

这样,在鼠标移到选项时,选项的背景色就会变成蓝色。


内容由零声教学AI助手提供,问题来源于学员提问

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

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

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

联系我们

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

微信号:3007537140

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

关注我们
x

注册

已经有帐号?