1. 从一次悬停卡片翻车说起cursor 与 opacity 到底怎么配合cursor和opacity这两个 CSS 属性单看都不复杂一个管鼠标移上去时指针长什么样一个管元素透不透明。但真把它们放进「悬停卡片」这种交互场景里问题就来了——鼠标移上去卡片是变亮了可指针还是默认箭头用户根本不知道这里能点或者按钮明明已经禁用opacity: 0.2也调了鼠标移上去却还是那只小手点下去毫无反应体验直接崩掉。我先把这两个属性是什么、能做什么、适合谁讲清楚。cursor用来设置鼠标指针悬停在元素上时的样式常见取值有pointer小手表示可点击、default默认箭头、not-allowed禁止符号、text文本光标、grab/grabbing拖拽等。opacity用来设置元素的不透明度取值0到10完全透明1完全不透明它会影响元素及其所有子元素的整体透明度。适合谁前端初学者、做后台管理系统的同学、以及任何需要给按钮/卡片加悬停反馈的人。真正让这两个属性「组合」出问题的是状态管理。比如一个「发送验证码」按钮点击后进入 60 秒倒计时这时候你希望它看起来是灰的、鼠标是禁止符号。很多人会像下面这样写$(#sendCodeBtn).attr(style, cursor: default;opacity: 0.2);这行代码本身没错但它把style属性整个覆盖了如果按钮原本还有别的内联样式全被冲掉。更麻烦的是倒计时结束后你得手动把cursor和opacity再改回来一旦漏改按钮就永远「灰」着。这就是典型的「用内联样式硬改状态」带来的维护问题。那这跟 TaoToken 有什么关系关系在于当你想把这类悬停交互做成一个可复用的小组件甚至让 AI 帮你生成、调试这些 CSS 代码时你需要一个稳定的模型调用入口。TaoToken 提供统一的 API Key让你在写代码、问模型、调样式的时候不用来回切换账号和密钥。下面我就从零搭一个悬停卡片把cursor和opacity的组合讲透再顺手把 TaoToken 的配置片段给你方便你一边写样式一边让模型帮你排查。2. TaoToken 统一 Key 前置准备一个 Key 打通模型调用在动手写卡片之前先把「工具链」准备好。你可能会问写个 CSS 而已为什么要配 API Key因为实际开发里悬停样式不生效的原因千奇百怪——可能是选择器优先级被覆盖可能是opacity影响了子元素定位也可能是浏览器缓存。这时候让模型帮你读代码、给排查思路比你自己盯着 DevTools 发呆快得多。而 TaoToken 的价值就是一个 Key统一调用多个模型不用为每个模型单独申请密钥。先说清楚 TaoToken 是什么它是一个大模型 API 聚合服务提供统一的接口地址和密钥管理。你可以把它理解成一个「模型调用的统一入口」适合需要频繁切换模型做代码生成、样式调试、文档问答的开发者。官网地址是https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_contentAPI 基础地址是https://taotoken.net/api注意 API 地址不加 UTM 参数。前置准备分三步。第一步注册并登录后进入控制台地址是https://taotoken.net/console?utm_sourcetaotoken_aicg_blog_endutm_contentconsoleutm_campaignrewrite在里面创建你的 API Key。第二步把 Key 保存好它通常以sk-开头后面跟一长串字符。第三步确认你要用的模型 ID比如做代码补全常用的claude-3-5-sonnet或gpt-4o这类具体以控制台里列出的为准。这里要提醒一句API Key 属于敏感信息不要写进前端代码也不要提交到 Git 仓库。正确做法是放在后端环境变量里或者本地开发时放在.env文件并加入.gitignore。我见过有人把 Key 直接写进 HTML 的script里结果被爬虫扫走第二天额度就被刷光了。如果你用的是 Claude Code 这类命令行工具配置方式又不一样。它需要设置ANTHROPIC_BASE_URL和ANTHROPIC_API_KEY两个环境变量Base URL 指向 TaoToken 的 API 地址Key 用你刚创建的。这样你在终端里让模型帮你改 CSS 时走的就是统一入口。具体命令在下一节给。还有一点TaoToken 的模型对话入口在https://taotoken.net/model-chat?utm_sourcetaotoken_aicg_blog_endutm_contentmodel_chatutm_campaignrewrite你可以直接在网页里粘贴一段 CSS 问它「为什么我的 cursor 不生效」适合快速验证。而如果你要长期做编码、跑 Agent 任务可以考虑 Coding Plan入口是https://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_contentcoding_planutm_campaignrewrite它更适合高频调用场景。把 Key 准备好之后我们就可以进入正题写一个带悬停反馈的卡片把cursor和opacity的组合用起来。3. 可复制配置悬停卡片 HTML/CSS 与 TaoToken 调用片段这一节给你两份可直接复制的东西一份是悬停卡片的完整 HTML/CSS另一份是 TaoToken 的配置片段。先看卡片。我们要做的效果是一张卡片默认状态下opacity: 0.85鼠标悬停时过渡到opacity: 1同时鼠标指针变成pointer表示可点击卡片里有一个「禁用按钮」它的cursor是not-allowedopacity是0.4并且不响应点击。完整代码如下!DOCTYPE html html langzh-CN head meta charsetUTF-8 titlecursor 与 opacity 悬停卡片/title style .card { width: 280px; padding: 20px; border-radius: 12px; background: #ffffff; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* 默认不透明度 */ opacity: 0.85; /* 默认光标 */ cursor: pointer; /* 过渡动画只过渡 opacity避免 cursor 过渡无效 */ transition: opacity 0.3s ease, transform 0.3s ease; } .card:hover { opacity: 1; transform: translateY(-4px); } .card .title { font-size: 18px; font-weight: 600; margin-bottom: 8px; } .card .desc { font-size: 14px; color: #666; margin-bottom: 16px; } .btn-disabled { padding: 8px 16px; border: none; border-radius: 6px; background: #4a90d9; color: #fff; /* 禁用态禁止光标 低不透明度 */ cursor: not-allowed; opacity: 0.4; /* 禁用点击 */ pointer-events: none; } /style /head body div classcard div classtitle悬停卡片示例/div div classdesc鼠标移上来观察不透明度和光标变化。/div button classbtn-disabled已禁用/button /div /body /html这段代码有几个关键点值得说。第一transition里我只写了opacity和transform没有写cursor。原因是cursor是离散属性过渡对它没有意义写了也不会产生动画反而可能让人误以为光标会「渐变」。第二禁用按钮用了pointer-events: none这样即使cursor: not-allowed在某些浏览器里表现不一致点击事件也传不进去。第三opacity作用在.card上时会影响里面所有子元素包括按钮所以如果你希望按钮不受卡片透明度影响得把opacity拆开处理或者用rgba背景色替代。接下来是 TaoToken 的配置片段。如果你用 Claude Code在终端里这样设置export ANTHROPIC_BASE_URLhttps://taotoken.net/api export ANTHROPIC_API_KEYsk-你的Key如果你用 Cline 这类 VS Code 插件配置通常写在settings.json里格式类似{ cline.apiProvider: anthropic, cline.apiKey: sk-你的Key, cline.baseUrl: https://taotoken.net/api, cline.model: claude-3-5-sonnet }如果你用 Codex 的auth.json结构大致是{ api_key: sk-你的Key, base_url: https://taotoken.net/api, model: gpt-4o }注意这三件套Base URL、Key、Model ID缺一不可。Base URL 统一用https://taotoken.net/apiKey 用你在控制台创建的Model ID 按你实际要用的填。配置好之后你就可以在编辑器里选中上面那段 CSS让模型帮你解释「为什么.card:hover的opacity没生效」它会结合上下文给你排查方向。4. 验证请求与成功结果DevTools 里看悬停态和透明度代码写完了怎么确认它真的生效别靠肉眼猜用浏览器 DevTools。下面是我实测的步骤你可以跟着做。第一步把上面的 HTML 保存为hover-card.html用 Chrome 打开。第二步按F12打开 DevTools切到 Elements 面板。第三步选中.card这个 div在右侧 Styles 面板里找到opacity: 0.85这一行。第四步把鼠标移到卡片上你会看到 Styles 面板里opacity的值实时变成1同时:hover伪类会显示在面板顶部。第五步切到 Computed 面板搜索cursor确认悬停时它的计算值是pointer。如果你想更精确地看过渡过程可以在 Elements 面板选中.card然后在 Styles 里手动改opacity的值从0.85慢慢调到1观察卡片是不是平滑变化。如果它是「跳变」而不是渐变说明transition没生效检查一下是不是写在了:hover里面而不是基础样式里。对于禁用按钮选中.btn-disabled在 Computed 面板里确认cursor是not-allowedopacity是0.4。然后把鼠标移上去指针应该变成禁止符号。如果你点击它没反应说明pointer-events: none生效了。那 TaoToken 在这里怎么验证你可以打开模型对话入口https://taotoken.net/model-chat?utm_sourcetaotoken_aicg_blog_endutm_contentmodel_chatutm_campaignrewrite把下面这段提示词粘进去我的卡片 CSS 里写了.card { opacity: 0.85; transition: opacity 0.3s ease; }和.card:hover { opacity: 1; }但悬停时没有过渡效果直接跳变。可能是什么原因模型会给你几个排查方向比如transition被后面的样式覆盖、元素被display: none影响、或者浏览器开了「减少动态效果」。这就是统一 Key 的好处你不需要在多个平台之间切换一个入口就能问。成功的结果应该是鼠标移上卡片卡片轻微上浮且变清晰指针变成小手移到禁用按钮上指针变成禁止符号按钮半透明且点不动。如果这四点都对了说明cursor和opacity的组合你已经掌握了。5. 本篇常见错排查401、local proxy failed 与样式不生效这一节把两类问题放一起讲一类是 TaoToken 调用时的报错一类是 CSS 本身不生效。先说你最可能遇到的 API 报错。401 Unauthorized这个最常见意思是 Key 无效或没传。检查三件事Key 是不是复制完整了有没有漏掉sk-后面的字符、环境变量名有没有写错Claude Code 是ANTHROPIC_API_KEY不是API_KEY、Base URL 是不是https://taotoken.net/api。如果 Key 是对的还报 401去控制台https://taotoken.net/api-keys?utm_sourcetaotoken_aicg_blog_endutm_contentapi_keysutm_campaignrewrite确认这个 Key 有没有被禁用或删除。local proxy failed这个报错通常出现在你本地配了代理工具但代理没启动或者端口不对。注意这里说的是你本地开发环境的网络配置问题不是让你去用什么特殊工具。解决办法是检查你的环境变量里有没有多余的HTTP_PROXY/HTTPS_PROXY如果有但代理没开把它清掉再试。reading choices 报错这个一般出现在流式响应解析时模型返回的 JSON 结构和你代码里预期的不一致。如果你是用 SDK 调用确认 SDK 版本和模型 ID 匹配如果是手写请求检查response.choices[0].message.content这个路径对不对。OAuth 相关报错如果你用的是需要 OAuth 登录的工具报错通常和 token 过期有关。重新走一遍登录流程或者检查系统时间是不是准的——时间偏差太大会导致 token 校验失败。再说 CSS 这边。cursor不生效九成是选择器优先级问题。比如你给.card写了cursor: pointer但某个更具体的选择器#app .card写了cursor: default后者会赢。用 DevTools 的 Computed 面板看最终生效的是哪条规则被划掉的就是没生效的。opacity不生效常见原因是父元素已经设了opacity子元素的opacity是在父元素基础上再乘视觉上变化不明显或者你写的是opacity: 0.85但被!important覆盖了。还有一个坑opacity小于 1 会创建新的层叠上下文可能影响position: fixed子元素的定位。如果你发现卡片里的下拉菜单位置错乱先检查是不是opacity导致的。6. 把统一 Key 用进日常编码从这张卡片继续往下走这张悬停卡片虽然小但它把cursor和opacity的组合、过渡、禁用态都串了一遍。你可以在此基础上继续扩展比如给卡片加一个「加载中」状态用cursor: wait配合opacity: 0.6或者做一组卡片悬停时只有当前卡片opacity: 1其他降到0.5这用:hover配合兄弟选择器就能实现。日常编码里我建议你把 TaoToken 的配置固定下来。Claude Code 的环境变量写进~/.zshrc或~/.bashrcCline 的配置写进 VS Code 的settings.jsonCodex 的auth.json放在对应目录。这样每次打开编辑器模型调用都是通的遇到样式问题直接选中代码问不用临时找 Key。如果你要长期做前端开发、频繁让模型帮忙改样式和排查兼容性问题可以看看 Coding Plan入口是https://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_contentcoding_planutm_campaignrewrite它更适合高频调用场景。接入文档在https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_contentdocutm_campaignrewrite里面有各工具的详细配置说明遇到不确定的参数先去这里查。最后留一个实用技巧调试cursor和opacity时在 DevTools 的 Styles 面板里直接改数值比改代码再刷新快得多。改到满意了再把值抄回 CSS 文件。这个习惯能帮你省下大量「改一行、刷一次」的时间。 
长河君 · 2026/10/8 12:19:30 · 阅读 1.2k CSS cursor 与 opacity 实战：用 TaoToken 统一 Key 调试光标悬停样式与元素不透明度
1. 从一次悬停卡片翻车说起cursor 与 opacity 到底怎么配合cursor和opacity这两个 CSS 属性单看都不复杂一个管鼠标移上去时指针长什么样一个管元素透不透明。但真把它们放进「悬停卡片」这种交互场景里问题就来了——鼠标移上去卡片是变亮了可指针还是默认箭头用户根本不知道这里能点或者按钮明明已经禁用opacity: 0.2也调了鼠标移上去却还是那只小手点下去毫无反应体验直接崩掉。我先把这两个属性是什么、能做什么、适合谁讲清楚。cursor用来设置鼠标指针悬停在元素上时的样式常见取值有pointer小手表示可点击、default默认箭头、not-allowed禁止符号、text文本光标、grab/grabbing拖拽等。opacity用来设置元素的不透明度取值0到10完全透明1完全不透明它会影响元素及其所有子元素的整体透明度。适合谁前端初学者、做后台管理系统的同学、以及任何需要给按钮/卡片加悬停反馈的人。真正让这两个属性「组合」出问题的是状态管理。比如一个「发送验证码」按钮点击后进入 60 秒倒计时这时候你希望它看起来是灰的、鼠标是禁止符号。很多人会像下面这样写$(#sendCodeBtn).attr(style, cursor: default;opacity: 0.2);这行代码本身没错但它把style属性整个覆盖了如果按钮原本还有别的内联样式全被冲掉。更麻烦的是倒计时结束后你得手动把cursor和opacity再改回来一旦漏改按钮就永远「灰」着。这就是典型的「用内联样式硬改状态」带来的维护问题。那这跟 TaoToken 有什么关系关系在于当你想把这类悬停交互做成一个可复用的小组件甚至让 AI 帮你生成、调试这些 CSS 代码时你需要一个稳定的模型调用入口。TaoToken 提供统一的 API Key让你在写代码、问模型、调样式的时候不用来回切换账号和密钥。下面我就从零搭一个悬停卡片把cursor和opacity的组合讲透再顺手把 TaoToken 的配置片段给你方便你一边写样式一边让模型帮你排查。2. TaoToken 统一 Key 前置准备一个 Key 打通模型调用在动手写卡片之前先把「工具链」准备好。你可能会问写个 CSS 而已为什么要配 API Key因为实际开发里悬停样式不生效的原因千奇百怪——可能是选择器优先级被覆盖可能是opacity影响了子元素定位也可能是浏览器缓存。这时候让模型帮你读代码、给排查思路比你自己盯着 DevTools 发呆快得多。而 TaoToken 的价值就是一个 Key统一调用多个模型不用为每个模型单独申请密钥。先说清楚 TaoToken 是什么它是一个大模型 API 聚合服务提供统一的接口地址和密钥管理。你可以把它理解成一个「模型调用的统一入口」适合需要频繁切换模型做代码生成、样式调试、文档问答的开发者。官网地址是https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_contentAPI 基础地址是https://taotoken.net/api注意 API 地址不加 UTM 参数。前置准备分三步。第一步注册并登录后进入控制台地址是https://taotoken.net/console?utm_sourcetaotoken_aicg_blog_endutm_contentconsoleutm_campaignrewrite在里面创建你的 API Key。第二步把 Key 保存好它通常以sk-开头后面跟一长串字符。第三步确认你要用的模型 ID比如做代码补全常用的claude-3-5-sonnet或gpt-4o这类具体以控制台里列出的为准。这里要提醒一句API Key 属于敏感信息不要写进前端代码也不要提交到 Git 仓库。正确做法是放在后端环境变量里或者本地开发时放在.env文件并加入.gitignore。我见过有人把 Key 直接写进 HTML 的script里结果被爬虫扫走第二天额度就被刷光了。如果你用的是 Claude Code 这类命令行工具配置方式又不一样。它需要设置ANTHROPIC_BASE_URL和ANTHROPIC_API_KEY两个环境变量Base URL 指向 TaoToken 的 API 地址Key 用你刚创建的。这样你在终端里让模型帮你改 CSS 时走的就是统一入口。具体命令在下一节给。还有一点TaoToken 的模型对话入口在https://taotoken.net/model-chat?utm_sourcetaotoken_aicg_blog_endutm_contentmodel_chatutm_campaignrewrite你可以直接在网页里粘贴一段 CSS 问它「为什么我的 cursor 不生效」适合快速验证。而如果你要长期做编码、跑 Agent 任务可以考虑 Coding Plan入口是https://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_contentcoding_planutm_campaignrewrite它更适合高频调用场景。把 Key 准备好之后我们就可以进入正题写一个带悬停反馈的卡片把cursor和opacity的组合用起来。3. 可复制配置悬停卡片 HTML/CSS 与 TaoToken 调用片段这一节给你两份可直接复制的东西一份是悬停卡片的完整 HTML/CSS另一份是 TaoToken 的配置片段。先看卡片。我们要做的效果是一张卡片默认状态下opacity: 0.85鼠标悬停时过渡到opacity: 1同时鼠标指针变成pointer表示可点击卡片里有一个「禁用按钮」它的cursor是not-allowedopacity是0.4并且不响应点击。完整代码如下!DOCTYPE html html langzh-CN head meta charsetUTF-8 titlecursor 与 opacity 悬停卡片/title style .card { width: 280px; padding: 20px; border-radius: 12px; background: #ffffff; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* 默认不透明度 */ opacity: 0.85; /* 默认光标 */ cursor: pointer; /* 过渡动画只过渡 opacity避免 cursor 过渡无效 */ transition: opacity 0.3s ease, transform 0.3s ease; } .card:hover { opacity: 1; transform: translateY(-4px); } .card .title { font-size: 18px; font-weight: 600; margin-bottom: 8px; } .card .desc { font-size: 14px; color: #666; margin-bottom: 16px; } .btn-disabled { padding: 8px 16px; border: none; border-radius: 6px; background: #4a90d9; color: #fff; /* 禁用态禁止光标 低不透明度 */ cursor: not-allowed; opacity: 0.4; /* 禁用点击 */ pointer-events: none; } /style /head body div classcard div classtitle悬停卡片示例/div div classdesc鼠标移上来观察不透明度和光标变化。/div button classbtn-disabled已禁用/button /div /body /html这段代码有几个关键点值得说。第一transition里我只写了opacity和transform没有写cursor。原因是cursor是离散属性过渡对它没有意义写了也不会产生动画反而可能让人误以为光标会「渐变」。第二禁用按钮用了pointer-events: none这样即使cursor: not-allowed在某些浏览器里表现不一致点击事件也传不进去。第三opacity作用在.card上时会影响里面所有子元素包括按钮所以如果你希望按钮不受卡片透明度影响得把opacity拆开处理或者用rgba背景色替代。接下来是 TaoToken 的配置片段。如果你用 Claude Code在终端里这样设置export ANTHROPIC_BASE_URLhttps://taotoken.net/api export ANTHROPIC_API_KEYsk-你的Key如果你用 Cline 这类 VS Code 插件配置通常写在settings.json里格式类似{ cline.apiProvider: anthropic, cline.apiKey: sk-你的Key, cline.baseUrl: https://taotoken.net/api, cline.model: claude-3-5-sonnet }如果你用 Codex 的auth.json结构大致是{ api_key: sk-你的Key, base_url: https://taotoken.net/api, model: gpt-4o }注意这三件套Base URL、Key、Model ID缺一不可。Base URL 统一用https://taotoken.net/apiKey 用你在控制台创建的Model ID 按你实际要用的填。配置好之后你就可以在编辑器里选中上面那段 CSS让模型帮你解释「为什么.card:hover的opacity没生效」它会结合上下文给你排查方向。4. 验证请求与成功结果DevTools 里看悬停态和透明度代码写完了怎么确认它真的生效别靠肉眼猜用浏览器 DevTools。下面是我实测的步骤你可以跟着做。第一步把上面的 HTML 保存为hover-card.html用 Chrome 打开。第二步按F12打开 DevTools切到 Elements 面板。第三步选中.card这个 div在右侧 Styles 面板里找到opacity: 0.85这一行。第四步把鼠标移到卡片上你会看到 Styles 面板里opacity的值实时变成1同时:hover伪类会显示在面板顶部。第五步切到 Computed 面板搜索cursor确认悬停时它的计算值是pointer。如果你想更精确地看过渡过程可以在 Elements 面板选中.card然后在 Styles 里手动改opacity的值从0.85慢慢调到1观察卡片是不是平滑变化。如果它是「跳变」而不是渐变说明transition没生效检查一下是不是写在了:hover里面而不是基础样式里。对于禁用按钮选中.btn-disabled在 Computed 面板里确认cursor是not-allowedopacity是0.4。然后把鼠标移上去指针应该变成禁止符号。如果你点击它没反应说明pointer-events: none生效了。那 TaoToken 在这里怎么验证你可以打开模型对话入口https://taotoken.net/model-chat?utm_sourcetaotoken_aicg_blog_endutm_contentmodel_chatutm_campaignrewrite把下面这段提示词粘进去我的卡片 CSS 里写了.card { opacity: 0.85; transition: opacity 0.3s ease; }和.card:hover { opacity: 1; }但悬停时没有过渡效果直接跳变。可能是什么原因模型会给你几个排查方向比如transition被后面的样式覆盖、元素被display: none影响、或者浏览器开了「减少动态效果」。这就是统一 Key 的好处你不需要在多个平台之间切换一个入口就能问。成功的结果应该是鼠标移上卡片卡片轻微上浮且变清晰指针变成小手移到禁用按钮上指针变成禁止符号按钮半透明且点不动。如果这四点都对了说明cursor和opacity的组合你已经掌握了。5. 本篇常见错排查401、local proxy failed 与样式不生效这一节把两类问题放一起讲一类是 TaoToken 调用时的报错一类是 CSS 本身不生效。先说你最可能遇到的 API 报错。401 Unauthorized这个最常见意思是 Key 无效或没传。检查三件事Key 是不是复制完整了有没有漏掉sk-后面的字符、环境变量名有没有写错Claude Code 是ANTHROPIC_API_KEY不是API_KEY、Base URL 是不是https://taotoken.net/api。如果 Key 是对的还报 401去控制台https://taotoken.net/api-keys?utm_sourcetaotoken_aicg_blog_endutm_contentapi_keysutm_campaignrewrite确认这个 Key 有没有被禁用或删除。local proxy failed这个报错通常出现在你本地配了代理工具但代理没启动或者端口不对。注意这里说的是你本地开发环境的网络配置问题不是让你去用什么特殊工具。解决办法是检查你的环境变量里有没有多余的HTTP_PROXY/HTTPS_PROXY如果有但代理没开把它清掉再试。reading choices 报错这个一般出现在流式响应解析时模型返回的 JSON 结构和你代码里预期的不一致。如果你是用 SDK 调用确认 SDK 版本和模型 ID 匹配如果是手写请求检查response.choices[0].message.content这个路径对不对。OAuth 相关报错如果你用的是需要 OAuth 登录的工具报错通常和 token 过期有关。重新走一遍登录流程或者检查系统时间是不是准的——时间偏差太大会导致 token 校验失败。再说 CSS 这边。cursor不生效九成是选择器优先级问题。比如你给.card写了cursor: pointer但某个更具体的选择器#app .card写了cursor: default后者会赢。用 DevTools 的 Computed 面板看最终生效的是哪条规则被划掉的就是没生效的。opacity不生效常见原因是父元素已经设了opacity子元素的opacity是在父元素基础上再乘视觉上变化不明显或者你写的是opacity: 0.85但被!important覆盖了。还有一个坑opacity小于 1 会创建新的层叠上下文可能影响position: fixed子元素的定位。如果你发现卡片里的下拉菜单位置错乱先检查是不是opacity导致的。6. 把统一 Key 用进日常编码从这张卡片继续往下走这张悬停卡片虽然小但它把cursor和opacity的组合、过渡、禁用态都串了一遍。你可以在此基础上继续扩展比如给卡片加一个「加载中」状态用cursor: wait配合opacity: 0.6或者做一组卡片悬停时只有当前卡片opacity: 1其他降到0.5这用:hover配合兄弟选择器就能实现。日常编码里我建议你把 TaoToken 的配置固定下来。Claude Code 的环境变量写进~/.zshrc或~/.bashrcCline 的配置写进 VS Code 的settings.jsonCodex 的auth.json放在对应目录。这样每次打开编辑器模型调用都是通的遇到样式问题直接选中代码问不用临时找 Key。如果你要长期做前端开发、频繁让模型帮忙改样式和排查兼容性问题可以看看 Coding Plan入口是https://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_contentcoding_planutm_campaignrewrite它更适合高频调用场景。接入文档在https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_contentdocutm_campaignrewrite里面有各工具的详细配置说明遇到不确定的参数先去这里查。最后留一个实用技巧调试cursor和opacity时在 DevTools 的 Styles 面板里直接改数值比改代码再刷新快得多。改到满意了再把值抄回 CSS 文件。这个习惯能帮你省下大量「改一行、刷一次」的时间。