ChromiumWebBrowser 获取页面元素 鼠标靠近高亮

ChromiumWebBrowser 是一个基于 Chromium 的 .NET 控件，可以在 Windows 程序中嵌入一个 Chromium 浏览器。在 ChromiumWebBrowser 中获取页面元素并高亮显示，可以通过 JavaScript 和 CSS 来实现。

首先需要在 ChromiumWebBrowser 中执行 JavaScript 代码，获取需要高亮的页面元素。可以使用以下代码获取鼠标所在位置的元素：

var element = document.elementFromPoint(event.clientX, event.clientY);

然后，可以使用以下 CSS 样式来添加高亮效果：

element:hover {
    outline: 2px solid red;
}

将上述代码放在一个 CSS 文件中，然后在 ChromiumWebBrowser 中加载该 CSS 文件即可实现鼠标靠近页面元素时的高亮效果。具体实现步骤如下：

1. 在项目中添加一个 CSS 文件，例如 "highlight.css"，将上述 CSS 样式代码复制到该文件中。

2. 在 ChromiumWebBrowser 中加载该 CSS 文件，可以使用以下 C# 代码：

var cssPath = Path.Combine(Application.StartupPath, "highlight.css");
var css = File.ReadAllText(cssPath);
browser.ExecuteScriptAsync("var style = document.createElement('style'); style.innerHTML = `" + css + "`; document.head.appendChild(style);");

3. 在 ChromiumWebBrowser 中添加鼠标移动事件，并在事件处理程序中执行 JavaScript 代码，获取鼠标所在位置的页面元素，并添加高亮效果。可以使用以下 C# 代码：

browser.MouseMove += (sender, e) =>
{
    var js = "var element = document.elementFromPoint(event.clientX, event.clientY); element.classList.add('highlight');";
    browser.ExecuteScriptAsync(js);
};

通过上述代码，当鼠标移动到页面上时，会将鼠标所在位置的元素添加 "highlight" 类，从而触发 CSS 样式中的高亮效果。需要注意的是，为了避免高亮效果一直存在，需要在鼠标离开元素时将该元素的 "highlight" 类移除。可以使用以下 C# 代码来实现：

browser.MouseLeave += (sender, e) =>
{
    var js = "var element = document.querySelector('.highlight'); if (element) element.classList.remove('highlight');";
    browser.ExecuteScriptAsync(js);
};