融灵篇-Day25｜鼠标灵法咒：鼠标悬停、拖拽进阶魔法

📖 知识点

1. 鼠标悬停：hover

把鼠标 "停" 在元素上（不点击），常用来触发悬浮菜单、显示提示：

# 定位元素并悬停
menu = page.ele(".menu-item")
menu.hover()

适合：下拉悬浮菜单、鼠标移上去才出现的按钮。

2. 鼠标拖拽：drag

按住一个元素，拖到另一个位置（常用于排序、拖滑块、拖放）：

# 定位源元素和目标位置元素
source = page.ele(".drag-item")
target = page.ele(".drop-zone")
# 从source拖到target
source.drag(target)

源元素.drag(目标元素)：把源元素拖拽到目标元素的位置。

3. 拖拽的进阶写法（按坐标偏移）

# 拖拽到指定坐标偏移
source.drag(100, 200)   # 相对当前位置，向右100、向下200

完整示例

from DrissionPage import ChromiumPage

page = ChromiumPage()
page.get("目标网址")

# 鼠标灵法咒1：悬停触发悬浮菜单
menu = page.ele(".user-menu")
menu.hover()
print("✅ 已悬停到用户菜单，悬浮内容应出现")

# 鼠标灵法咒2：拖拽元素到目标区
source = page.ele(".drag-item")
target = page.ele(".drop-zone")
source.drag(target)
print("✅ 已拖拽元素到目标区")

💡 理解

• hover()：悬停，不点击，常用于触发悬浮菜单 / 提示
• drag(目标元素)：拖拽到目标位置，常用于排序、拖放
• drag(x, y)：按坐标偏移拖拽

⚠️ 易错提醒

1. 悬停后悬浮菜单是动态出现的，可能要等 0.5~1 秒再点里面的选项
2. 拖拽元素要确保源元素、目标元素都已定位到
3. 滑块验证类拖拽，需要准确的目标位置，必要时配合坐标

⚔️ Kata 实战任务

任务需求：

1. 导入 ChromiumPage
2. 访问一个含悬停 / 拖拽的练习页（如 https://the-internet.herokuapp.com/hovers 悬停练习）
3. 用 .hover() 悬停到第一个头像，观察触发效果
4. 定位悬停后出现的隐藏链接，读取文字
5. 打印结果

参考代码

from DrissionPage import ChromiumPage

page = ChromiumPage()
# 访问悬停练习页
page.get("https://the-internet.herokuapp.com/hovers")
print("🌐 已打开悬停练习页")

# 鼠标灵法咒：悬停到第一个头像
figure = page.ele(".figure")   # 头像元素
figure.hover()
print("✅ 已悬停到第一个头像")

# 悬停后，读取出现的隐藏信息链接
info = page.ele("a:has-text(view profile)")
print("🔗 悬停后出现的链接：", info.text)

运行输出（示意）：

🌐 已打开悬停练习页
✅ 已悬停到第一个头像
🔗 悬停后出现的链接： view profile

💡 观察：悬停到头像后，"View profile" 字样和链接从隐藏变为可见。这就是 hover 触发动态内容的效果。

🧠 思考题

1. hover() 和 click() 触发的内容有什么不同？什么场景必须用悬停？
2. 拖拽滑块这类操作，用 drag(目标元素) 还是坐标拖拽更合适？为什么？