把点击事件换成鼠标悬浮事件 并 鼠标离开时去掉这个红框

可以使用 `mouseenter` 和 `mouseleave` 事件代替 `click` 事件，并在鼠标离开时去掉红框。例如，如果我们要在鼠标悬浮事件中画一个红色框把含有 `data-comp` 属性的父元素框起来，并在鼠标离开时去掉红框，可以这样做：

document.addEventListener('mouseenter', event => {
  const compElement = event.target.closest('[data-comp]');

  if (compElement) {
    const rect = compElement.getBoundingClientRect();
    const div = document.createElement('div');

    div.setAttribute('data-comp-highlight', ''); // 标记已经高亮的元素
    div.style.position = 'absolute';
    div.style.left = `${rect.left}px`;
    div.style.top = `${rect.top}px`;
    div.style.width = `${rect.width}px`;
    div.style.height = `${rect.height}px`;
    div.style.border = '2px solid red';

    document.body.appendChild(div);
  }
});

document.addEventListener('mouseleave', event => {
  const compElement = event.target.closest('[data-comp]');
  const highlightElement = document.querySelector('[data-comp-highlight]');

  if (compElement && highlightElement) {
    highlightElement.remove(); // 移除红色框
  }
});

在上面的代码中，`mouseenter` 事件会在鼠标悬浮时触发，`mouseleave` 事件会在鼠标离开时触发。如果事件触发的元素含有 `data-comp` 属性，则会画一个红色框把含有 `data-comp` 属性的父元素框起来，并添加到文档中。在鼠标离开时，如果事件触发的元素含有 `data-comp` 属性，并且已经画了红色框，则会移除红色框。需要注意，在画红色框时，要给红色框添加一个 `data-comp-highlight` 属性来标记已经高亮的元素，以便在鼠标离开时进行移除。