Highlighting text in React using hover effects on list elements

Question

Highlighting text in React using hover effects on list elements

Imagine having HTML / JSX structured like this:

<ul>
  <li>First point in list</li>
  <li>Second point in list</li>
</ul>

and the goal is to highlight a contiguous range that spans multiple list items:

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

Furthermore, there's a desire to implement behavior where hovering over one <mark> tag triggers an effect on another <mark> tag. This should give the user a seamless experience as if it were a single <mark> tag.

Is it achievable solely with CSS / Tailwind? As per current knowledge, using the sibling ~ combinator mentioned here, only affects elements that appear later not earlier. The same limitation seems to apply to the peer class in Tailwind.

If JavaScript intervention becomes necessary, can anyone provide guidance or resources? Noting this pertains to a React project, manipulating the DOM directly might involve certain considerations.

javascript html css reactjs tailwind-css

Answer 1

Answer №1

When hovering over one mark hovers all others, it's 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>

If hovering over a mark only hovers contiguous marks, then it requires more complex styling.

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>

To work around Firefox not supporting :has() by default (as of v109), JavaScript can be used.

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>

Answer 2

When hovering over one mark hovers all others, it's 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>

If hovering over a mark only hovers contiguous marks, then it requires more complex styling.

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>

To work around Firefox not supporting :has() by default (as of v109), JavaScript can be used.

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>

Highlighting text in React using hover effects on list elements

Answer №1

Similar questions

The data type 'string' cannot be assigned to the data type 'undefined'

A guide to submitting forms within Stepper components in Angular 4 Material

Stop text from being selected across all browsers in Firefox

How can Angular CLI prevent the submission of an HTML form unless a previous option has been selected

The content within the mat-card-content paragraph exceeds the boundaries of the mat-card container,

Is it possible for a mobile device to play .ogg videos?

Combining multiple 'Eithers' and 'Promises' in fp-ts: A guide to piping and chaining operations

Prevent Image Distortion in HTML and CSS

How can I replicate the functionality of a div mimicking a select element using javascript upon clicking away from the element?

Ways to deactivate a button within a Kendo Grid cell

The added class is not being successfully applied to the ClassList

Does deploying on Heroku cause Material UI makeStyles to disappear?

The edges of the cube are not joined together

Setting a specific time zone as the default in Flatpickr, rather than relying on the system's time zone, can be

Undefined React custom hooks can be a tricky issue to troub

The ideal login page design

Tips for running two elixir tasks consecutively?

Issue with React Redux: Store dispatch not causing component update

Transform the assurance into a JSON entity

What could be the reason for my ng-init not functioning properly?