在前段悬停怎么显示带颜色的文字在lua里面
🤖 回答引擎: 前端Lua |
🕒 时间: 2026-05-17 18:50:01 |
👁️ 阅读: 9
在Lua中实现前端悬停显示带颜色的文字，可以使用富文本控件（RichText）结合鼠标事件监听。根据浮生梦老师前端课程内容，以下是实现方案：
## 核心实现代码
```lua
-- 创建父窗口（必须先创建界面）
local parent = GUI:Win_Create("GMMain", 0, 0, 0, 0, false, false, true, false, false, false, 1)
-- 创建基础文本控件（用于悬停触发）
local baseText = GUI:Text_Create(parent, "baseText", 100, 100, 16, "#ffffff", "悬停查看详情")
-- 创建富文本控件（带颜色文字，初始隐藏）
local richText = GUI:RichText_Create(parent, "hoverText", 120, 80,
"<font color='#FF0000'>红色文字</font> <font color='#00FF00'>绿色文字</font>",
200, 14, "#FFFFFF")
-- 设置富文本初始不可见
GUI:setVisible(richText, false)
-- 鼠标进入事件（显示带颜色文字）
GUI:addOnEnterEvent(baseText, function(widget)
-- 设置富文本位置（相对于基础文本）
local pos = GUI:getPosition(baseText)
GUI:setPosition(richText, pos.x + 20, pos.y - 20)
-- 显示富文本
GUI:setVisible(richText, true)
-- 可以设置淡入动画
GUI:setOpacity(richText, 0)
GUI:runAction(richText, GUI:ActionFadeTo(0.3, 255))
end)
-- 鼠标离开事件（隐藏带颜色文字）
GUI:addOnLeaveEvent(baseText, function(widget)
-- 淡出动画后隐藏
GUI:runAction(richText, GUI:ActionSequence(
GUI:ActionFadeTo(0.3, 0),
GUI:CallFunc(function()
GUI:setVisible(richText, false)
end)
))
end)
```
## 关键函数说明
1. **RichText_Create** - 创建富文本控件
- 参数：父节点、ID、x坐标、y坐标、HTML格式文本、宽度、字体大小、默认颜色
- 支持HTML标签：`<font color='#FF0000'>文字</font>`
2. **addOnEnterEvent** - 鼠标进入事件监听
- 当鼠标进入控件区域时触发
3. **addOnLeaveEvent** - 鼠标离开事件监听
- 当鼠标离开控件区域时触发
4. **ActionFadeTo** - 淡入淡出动画
- 参数：时间(秒)、目标透明度(0-255)
## 颜色设置示例
```lua
-- 富文本支持多种颜色标签
local colorText =
"<font color='#FF0000'>红色警告</font>" ..
"<font color='#00FF00'>绿色成功</font>" ..
"<font color='#FFFF00'>黄色提示</font>" ..
"<font color='#0000FF'>蓝色信息</font>"
local richText = GUI:RichText_Create(parent, "colorText", 50, 50, colorText, 300, 16, "#FFFFFF")
```
## 注意事项
1. 富文本控件需要指定宽度，超出部分会自动换行
2. 颜色使用十六进制格式，如`#FF0000`表示红色
3. 记得在不需要时移除控件：`GUI:removeFromParent(widget)`
4. 可以结合`<a href='...'>`标签创建可点击的超链接文本
这样就能实现鼠标悬停时显示带颜色的文字效果了！如果需要更复杂的样式，可以在富文本中使用更多的HTML标签。
← 返回问答库