text across elements with hover behavior in React

Question

Suppose I have HTML / JSX like this:

<ul>
  <li>First bullet point</li>
  <li>Second bullet point</li>
</ul>

and I want to highlight a range that "spans" multiple list elements "contiguously":

<ul>
  <li>First bullet <mark>point</mark></li>
  <li><mark>Second bullet</mark> point</li>
</ul>

Lastly, I'd like to add behaviour such that hovering over the first <mark> tags will trigger something for the second <mark> tags and vice versa. From the user's perspective, it should look and feel like a single <mark> tag.

Can this be done exclusively with CSS / Tailwind? Based on what I've seen so far, the sibling ~ combinator can only be used on earlier elements to affect later elements. The same appears to be true for the peer class in Tailwind.

If Javascript is required, can someone point me in the right direction? FWIW, this is for a React project so there may be some caveats to manipulating the DOM directly.

Answer 1

1. If hovering over any mark will also "hover" every other mark, then it is a simple has() call.

ul:has(mark:hover) mark {
  background-color: red;
}

<ul>
  <li><span>First bullet </span><mark>point</mark></li>
  <li><mark>Second bullet</mark><span> point</span></li>
  <li><span>Third bullet </span><mark>point</mark></li>
  <li><mark>Fourth bullet</mark><span> point</span></li>
  <li><span>The </span><mark>Fifth bullet</mark><span> point</span></li>
</ul>

2. If hovering over a mark only "hovers" marks that are contiguous, then it is a bit more complicated.

li mark:hover,
li:has(mark:last-child:hover) + li > mark:first-child,
li:has(mark:last-child):has(+ li > mark:first-child:hover) mark {
  background-color: red;
}

<ul>
  <li><span>First bullet </span><mark>point</mark></li>
  <li><mark>Second bullet</mark><span> point</span></li>
  <li><span>Third bullet </span><mark>point</mark></li>
  <li><mark>Fourth bullet</mark><span> point</span></li>
  <li><span>The </span><mark>Fifth bullet</mark><span> point</span></li>
</ul>

3. Since :has() is not enabled by default on Firefox (as of v109), here's a workaround using JavaScript.

const ul = document.querySelector("ul");

const removeActive = function (evt) {
  const active = evt.currentTarget.querySelector("mark.active");
  if (active) active.classList.remove("active");
}

ul.addEventListener("mouseover", function (evt) {
  removeActive(evt);
  let elem = null;

  const mark = evt.target.closest("mark");
  if (!mark) return;
  
  const li = mark.closest("li");
  
  if (!mark.previousSibling) {
    const prevLi = li.previousElementSibling;
    elem = prevLi && prevLi.lastChild;
  } else if (!mark.nextSibling) {
    const nextLi = li.nextElementSibling;
    elem = nextLi && nextLi.firstChild;
  }
  
  if (elem && elem.nodeName == "MARK") {
    elem.classList.add("active");
  }
});

ul.addEventListener("mouseleave", removeActive);

li mark:hover,
li mark.active {
  background-color: red;
}

<ul>
  <li>First bullet <mark>point</mark></li>
  <li><mark>Second bullet</mark> point</li>
  <li>Third bullet <mark>point</mark></li>
  <li><mark>Fourth bullet</mark> point</li>
  <li>The </span><mark>Fifth bullet</mark><span> point</li>
</ul>