is it possible to highlight the whole url when mouse move into

[jiangxiaoqiang]

when I move the mouse over the url in pdf, the triggered hightlight only contains one single line of the url:

but the whole url was multiline, is it possible to hightlight the whole multiline url when mouse moved into?

[hachi-008]

This usually happens when the PDF stores the wrapped URL as two link annotations, one per line. react-pdf renders each one as its own <a> in the annotation layer, so :hover only matches the line under the mouse. CSS can't target "every other link with the same href", so it takes a bit of JS.

function Viewer({ file }) {
  const ref = useRef(null);

  function onMouseOver(e) {
    const link = e.target.closest('.linkAnnotation > a');
    if (!link) return;
    ref.current
      .querySelectorAll('.linkAnnotation > a')
      .forEach((a) => a.classList.toggle('hovered', a.href === link.href));
  }

  function onMouseOut() {
    ref.current
      .querySelectorAll('.linkAnnotation > a.hovered')
      .forEach((a) => a.classList.remove('hovered'));
  }

  return (
    <div ref={ref} onMouseOver={onMouseOver} onMouseOut={onMouseOut}>
      <Document file={file}>
        <Page pageNumber={1} />
      </Document>
    </div>
  );
}

.annotationLayer .linkAnnotation > a.hovered {
  opacity: 0.2;
  background: rgba(255, 255, 0, 1);
  box-shadow: 0 2px 10px rgba(255, 255, 0, 1);
}

The CSS is just react-pdf's own :hover style. Tested on react-pdf 10.5.0 with a PDF where one URL is split into two link annotations, and both lines light up together.