【代码片段】鼠标悬浮块,显示特定的背景颜色(js,非 CSS)

本贴最后更新于 399 天前,其中的信息可能已经渤澥桑田

分享一个悬浮到块上显示颜色修改的代码片段,功能如题。

应用场景:需要聚焦的任何场景(复盘、核对...)

// 函数用于高亮悬浮元素或其父元素
function highlightElement(element, highlightedElements) {
    if (!element.getAttribute('data-node-id') &&
        element.parentElement &&
        element.parentElement.getAttribute('data-node-id')) {
        element = element.parentElement;
    }
    if (highlightedElements.length > 0) {
        resetHighlightedElements(highlightedElements);
    }
    element.originalBackgroundColor = element.style.backgroundColor;
    var customRGBAColor = 'rgba(55, 255, 164, 0.4)';
    element.style.backgroundColor = customRGBAColor;
    highlightedElements.push({ element: element, originalBackgroundColor: element.originalBackgroundColor });
}

// 函数用于恢复高亮元素的背景颜色
function resetHighlightedElements(highlightedElements) {
    highlightedElements.forEach(function(elementInfo) {
        elementInfo.element.style.backgroundColor = elementInfo.originalBackgroundColor;
    });
    highlightedElements.length = 0; // 清空数组
}

function setupHoverEffect(targetContainer) {
    var highlightedElements = [];

    // 添加鼠标悬浮事件处理程序
    targetContainer.addEventListener('mouseover', function(event) {
        var hoveredElement = event.target;
        if (hoveredElement === targetContainer) {
            return;
        }
        highlightElement(hoveredElement, highlightedElements);
    });

    // 添加鼠标移出事件处理程序
    targetContainer.addEventListener('mouseout', function(event) {
        if (event.target !== this) {
            resetHighlightedElements(highlightedElements);
        }
    });
}

function observeDOMForTargetContainer() {
    var hoverEffectObserver = new MutationObserver(function(mutationsList) {
        for(var mutation of mutationsList) {
            if (mutation.type === 'childList' || mutation.type === 'attributes') {
                var targetContainer = document.querySelector('.protyle-wysiwyg[data-doc-type="NodeDocument"]');
                if (targetContainer && !targetContainer.__hoverEffectSet) {
                    setupHoverEffect(targetContainer);
                    targetContainer.__hoverEffectSet = true;
                }
            }
        }
    });
  
    hoverEffectObserver.observe(document.body, {
        childList: true,
        attributes: true,
        subtree: true, // 观察整个DOM树的变化
    });
}

// 执行代码

observeDOMForTargetContainer();
console.log('开始观察DOM变化并为目标容器设置悬浮效果。');



如果你觉得不好看,直接修改 var customRGBAColor = rgba(55, 255, 164, 0.4);,换上你喜欢的颜色。

附带效果视频

  • 思源笔记

    思源笔记是一款隐私优先的个人知识管理系统,支持完全离线使用,同时也支持端到端加密同步。

    融合块、大纲和双向链接,重构你的思维。

    22009 引用 • 87757 回帖 • 2 关注
1 操作
LbLhNkg 在 2023-10-02 16:35:58 更新了该帖

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...
  • suka 1 评论

    视频是空白的。。

    不过下载之后能看
    JeffreyChen
  • 感谢,这种聚光灯容易让精力聚焦。

    但是使用中发现一个问题:

    新打开一个笔记页面(tab)代码片段无效,此时如果重启思源笔记,那么在这个新打开的 tab 页面生效,

    也就是说(个人推测),js 代码是在思源笔记启动时加载的,并且只对上次退出思源笔记时保持打开的 tab 生效

    能否改进一下,也就是对新打开的 tab 也能生效

推荐标签 标签

  • 酷鸟浏览器

    安全 · 稳定 · 快速
    为跨境从业人员提供专业的跨境浏览器

    3 引用 • 59 回帖 • 31 关注
  • JRebel

    JRebel 是一款 Java 虚拟机插件,它使得 Java 程序员能在不进行重部署的情况下,即时看到代码的改变对一个应用程序带来的影响。

    26 引用 • 78 回帖 • 657 关注
  • VirtualBox

    VirtualBox 是一款开源虚拟机软件,最早由德国 Innotek 公司开发,由 Sun Microsystems 公司出品的软件,使用 Qt 编写,在 Sun 被 Oracle 收购后正式更名成 Oracle VM VirtualBox。

    10 引用 • 2 回帖 • 11 关注
  • 单点登录

    单点登录(Single Sign On)是目前比较流行的企业业务整合的解决方案之一。SSO 的定义是在多个应用系统中,用户只需要登录一次就可以访问所有相互信任的应用系统。

    9 引用 • 25 回帖
  • Vim

    Vim 是类 UNIX 系统文本编辑器 Vi 的加强版本,加入了更多特性来帮助编辑源代码。Vim 的部分增强功能包括文件比较(vimdiff)、语法高亮、全面的帮助系统、本地脚本(Vimscript)和便于选择的可视化模式。

    29 引用 • 66 回帖 • 4 关注
  • 快应用

    快应用 是基于手机硬件平台的新型应用形态;标准是由主流手机厂商组成的快应用联盟联合制定;快应用标准的诞生将在研发接口、能力接入、开发者服务等层面建设标准平台;以平台化的生态模式对个人开发者和企业开发者全品类开放。

    15 引用 • 127 回帖 • 2 关注
  • 正则表达式

    正则表达式(Regular Expression)使用单个字符串来描述、匹配一系列遵循某个句法规则的字符串。

    31 引用 • 94 回帖 • 1 关注
  • Quicker

    Quicker 您的指尖工具箱!操作更少,收获更多!

    30 引用 • 123 回帖
  • Mobi.css

    Mobi.css is a lightweight, flexible CSS framework that focus on mobile.

    1 引用 • 6 回帖 • 733 关注
  • Sillot

    Insights(注意当前设置 master 为默认分支)

    汐洛彖夲肜矩阵(Sillot T☳Converbenk Matrix),致力于服务智慧新彖乄,具有彖乄驱动、极致优雅、开发者友好的特点。其中汐洛绞架(Sillot-Gibbet)基于自思源笔记(siyuan-note),前身是思源笔记汐洛版(更早是思源笔记汐洛分支),是智慧新录乄终端(多端融合,移动端优先)。

    主仓库地址:Hi-Windom/Sillot

    文档地址:sillot.db.sc.cn

    注意事项:

    1. ⚠️ 汐洛仍在早期开发阶段,尚不稳定
    2. ⚠️ 汐洛并非面向普通用户设计,使用前请了解风险
    3. ⚠️ 汐洛绞架基于思源笔记,开发者尽最大努力与思源笔记保持兼容,但无法实现 100% 兼容
    29 引用 • 25 回帖 • 78 关注
  • Sym

    Sym 是一款用 Java 实现的现代化社区(论坛/BBS/社交网络/博客)系统平台。

    下一代的社区系统,为未来而构建

    524 引用 • 4600 回帖 • 701 关注
  • ActiveMQ

    ActiveMQ 是 Apache 旗下的一款开源消息总线系统,它完整实现了 JMS 规范,是一个企业级的消息中间件。

    19 引用 • 13 回帖 • 668 关注
  • Openfire

    Openfire 是开源的、基于可拓展通讯和表示协议 (XMPP)、采用 Java 编程语言开发的实时协作服务器。Openfire 的效率很高,单台服务器可支持上万并发用户。

    6 引用 • 7 回帖 • 97 关注
  • OAuth

    OAuth 协议为用户资源的授权提供了一个安全的、开放而又简易的标准。与以往的授权方式不同之处是 oAuth 的授权不会使第三方触及到用户的帐号信息(如用户名与密码),即第三方无需使用用户的用户名与密码就可以申请获得该用户资源的授权,因此 oAuth 是安全的。oAuth 是 Open Authorization 的简写。

    36 引用 • 103 回帖 • 2 关注
  • 安装

    你若安好,便是晴天。

    132 引用 • 1184 回帖 • 1 关注
  • 资讯

    资讯是用户因为及时地获得它并利用它而能够在相对短的时间内给自己带来价值的信息,资讯有时效性和地域性。

    55 引用 • 85 回帖 • 2 关注
  • Kafka

    Kafka 是一种高吞吐量的分布式发布订阅消息系统,它可以处理消费者规模的网站中的所有动作流数据。 这种动作(网页浏览,搜索和其他用户的行动)是现代系统中许多功能的基础。 这些数据通常是由于吞吐量的要求而通过处理日志和日志聚合来解决。

    36 引用 • 35 回帖 • 2 关注
  • Kubernetes

    Kubernetes 是 Google 开源的一个容器编排引擎,它支持自动化部署、大规模可伸缩、应用容器化管理。

    110 引用 • 54 回帖 • 3 关注
  • etcd

    etcd 是一个分布式、高可用的 key-value 数据存储,专门用于在分布式系统中保存关键数据。

    5 引用 • 26 回帖 • 527 关注
  • SpaceVim

    SpaceVim 是一个社区驱动的模块化 vim/neovim 配置集合,以模块的方式组织管理插件以
    及相关配置,为不同的语言开发量身定制了相关的开发模块,该模块提供代码自动补全,
    语法检查、格式化、调试、REPL 等特性。用户仅需载入相关语言的模块即可得到一个开箱
    即用的 Vim-IDE。

    3 引用 • 31 回帖 • 101 关注
  • SendCloud

    SendCloud 由搜狐武汉研发中心孵化的项目,是致力于为开发者提供高质量的触发邮件服务的云端邮件发送平台,为开发者提供便利的 API 接口来调用服务,让邮件准确迅速到达用户收件箱并获得强大的追踪数据。

    2 引用 • 8 回帖 • 478 关注
  • Markdown

    Markdown 是一种轻量级标记语言,用户可使用纯文本编辑器来排版文档,最终通过 Markdown 引擎将文档转换为所需格式(比如 HTML、PDF 等)。

    167 引用 • 1508 回帖
  • 服务器

    服务器,也称伺服器,是提供计算服务的设备。由于服务器需要响应服务请求,并进行处理,因此一般来说服务器应具备承担服务并且保障服务的能力。

    124 引用 • 580 回帖
  • 生活

    生活是指人类生存过程中的各项活动的总和,范畴较广,一般指为幸福的意义而存在。生活实际上是对人生的一种诠释。生活包括人类在社会中与自己息息相关的日常活动和心理影射。

    230 引用 • 1454 回帖
  • 音乐

    你听到信仰的声音了么?

    60 引用 • 511 回帖
  • 链书

    链书(Chainbook)是 B3log 开源社区提供的区块链纸质书交易平台,通过 B3T 实现共享激励与价值链。可将你的闲置书籍上架到链书,我们共同构建这个全新的交易平台,让闲置书籍继续发挥它的价值。

    链书社

    链书目前已经下线,也许以后还有计划重制上线。

    14 引用 • 257 回帖
  • API

    应用程序编程接口(Application Programming Interface)是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力,而又无需访问源码,或理解内部工作机制的细节。

    77 引用 • 429 回帖 • 2 关注