论坛 › 问答互助 › 请问大家如何实现鼠标悬停的效果？

xiaooooooo 发表于 2023-7-25 23:09:59

请问大家如何实现鼠标悬停的效果？

在有些网站中，有的元素只有在鼠标悬停的时候才会弹出，调试也不好调，因为定位不到元素，打开inspect工具栏以后鼠标移走就消失了。
请教各位大佬，这种元素要如何让它一直显示呢？或者说创造一个“悬停”的效果呢？
例如在这个网站中：
https://detail.1688.com/offer/688098294928.html?spm=a26352.13672862.offerlist.8.2fd46458Mz1JmL
当鼠标放在商家名字的时候就会弹出如下画面：
!(data/attachment/forum/202307/25/230949d8yi89kai6yn60gi.png)
我如何做到让它一直显示在屏幕上呢？

脚本体验师001 发表于 2023-7-25 23:10:00

xiaooooooo 发表于 2023-7-29 14:02
研究了两天 没搞出来
大佬有vx或者qq不 我想买个现成方案

在这里讨论技术方面是不需要花钱的，这也是我喜欢这个论坛的原因，每个人都会和善的对待你

const ele = document.querySelector("#hd_0_container_0 > div:nth-child(1) > div:nth-child(2) > div > div:nth-child(1) > div:nth-child(3)");
const prop = Object.keys(ele).find(p => p.startsWith('__reactEventHandlers'));
ele.onMouseEnter();

什么时候想要出现就调用一下上面代码，如果你希望显示出来之后不再消失
可以在 上面代码之前粗暴的加一句： setTimeout = () => {};

李恒道 发表于 2023-7-25 23:56:10

hover分为两种情况
一种是通过css的hover控制，这个时候勾选对应dom的hove样式即可
第二种属于用过js监听鼠标的移入移出来渲染对应的dom
这个时候通过ctrl+shift+c选择浮动元素
然后找到固定父级下子树修改断点

至于如何显示就相当于触发事件了
参考元素校验那节

xiaooooooo 发表于 2023-7-26 00:19:19

李恒道 发表于 2023-7-25 23:56
hover分为两种情况
一种是通过css的hover控制，这个时候勾选对应dom的hove样式即可
![图片.png](data/a ...

谢大佬指点。

第一种情况那些勾我勾上了不过似乎没有见效。
第二种情况我的确是可以通过快捷键暂时性的查看到内部结构了，不过我鼠标一旦移动还是会消失（有时候由于我屏幕尺寸太小需要伸缩节点列表）。固定父级在这个案例里面就是那个<div></div>对吧？我在event listener breakpoints里面试过，没有合适的鼠标动作，只有load好像还能触发一下
!(data/attachment/forum/202307/26/001616l8vopqo6b6aop0n7.png)

后来我发现一个取巧的方法，就是在调试工具里面调整成手机页面，这样子那个hover效果就不会自动消失了。调试定位上舒适一些。
请问大佬使用油猴要怎么触发这个hover效果呢？用click函数吗？

李恒道 发表于 2023-7-26 12:34:29

xiaooooooo 发表于 2023-7-26 00:19
谢大佬指点。

第一种情况那些勾我勾上了不过似乎没有见效。


第二种你快捷键找到了要找到父级固定dom然后下子树修改断点

李恒道 发表于 2023-7-26 12:40:18

至于触发的直接参考元素校验那节
打堆栈回溯确定哪个变量是分发调用的
拿react实例触发函数即可




脚本体验师001 发表于 2023-7-26 12:56:25

document.querySelector("#hd_0_container_0 > div:nth-child(1) > div:nth-child(2) > div > div:nth-child(1) > div:nth-child(3)").__reactEventHandlers$b7scpqvq7un.onMouseEnter()
老师说的是不是这个意思，这不就出来了

李恒道 发表于 2023-7-26 13:37:31

脚本体验师001 发表于 2023-7-26 12:56
老师说的是不是这个意思，这不就出来了

对~
我本来想把这个最后的课题留给他自己想的~

cxxjackie 发表于 2023-7-26 22:44:07

用快捷键操作，目标元素出现后按下F8暂停，此时页面会被冻结，就可以去定位元素了。

xiaooooooo 发表于 2023-7-28 00:17:00

脚本体验师001 发表于 2023-7-26 12:56
老师说的是不是这个意思，这不就出来了

谢大佬指点。但是b7scpqvq7un这个定位我没看懂

在https://bbs.tampermonkey.net.cn/forum.php?mod=viewthread&tid=1250中，原文是这样说的
——————————————————
触发焦点后组件才进行input的渲染，这里我们找到input

input.__reactEventHandlers$xxxx.onChange({target:{value:'1234'}})

我们对input输入框触发修改，来让其进行搜索
——————————————————
所以这个b7scpqvq7un应该是class属性的意思？还是id属性？

查看完整版本: 请问大家如何实现鼠标悬停的效果？