表格行高亮交互问题：点击取消高亮后hover状态未即时失效

I get exactly what's happening here—when you click to deselect a highlighted row while your mouse is still hovering over it, the hover style sticks around until you move the mouse away. That's because CSS's :hover pseudo-class overrides your deselected state in that moment. Here's a clean, straightforward fix that makes the deselection show up instantly, without breaking your existing hover/click flow:

Step 1: Update Your CSS to Conditionally Disable Hover #

First, adjust your styles so the hover effect only applies when the row isn't actively selected AND isn't in a temporary "no-hover" state (we'll toggle this class with JavaScript):

/* Base row style - add transition for smooth visual changes */
.table-row {
  background-color: #ffffff; /* Your default row background */
  transition: background-color 0.2s ease;
}

/* Hover only applies to non-active, non-no-hover rows */
.table-row:not(.active):not(.no-hover):hover {
  background-color: #4299e1; /* Your preferred hover blue */
}

/* Persistent selected row style */
.table-row.active {
  background-color: #4299e1; /* Match your hover blue for consistency */
}

Step 2: Add JavaScript to Manage Row States #

Use JS to handle the click logic, and temporarily disable hover when deselecting a row:

// Grab all target table rows
const tableRows = document.querySelectorAll('.table-row');

tableRows.forEach(row => {
  row.addEventListener('click', function() {
    const isActive = this.classList.contains('active');
    
    if (isActive) {
      // Deselect flow: First disable hover, then remove active class
      this.classList.add('no-hover');
      this.classList.remove('active');
      
      // Re-enable hover once the mouse leaves the row (one-time listener)
      const enableHoverOnLeave = () => {
        this.classList.remove('no-hover');
        this.removeEventListener('mouseleave', enableHoverOnLeave);
      };
      this.addEventListener('mouseleave', enableHoverOnLeave);
    } else {
      // Deselect all other rows first to avoid multiple active rows
      tableRows.forEach(r => {
        r.classList.remove('active', 'no-hover');
      });
      // Mark current row as active
      this.classList.add('active');
    }
  });
});

How This Fix Works #

• When you click an active row to deselect it, we immediately add the no-hover class. The CSS :not(.no-hover) rule ensures the hover style doesn't apply anymore, so the default background color shows up right away.
• We add a one-time mouseleave listener to remove the no-hover class once the mouse moves off the row, so hover functionality works normally again for future interactions.
• The active class handles the persistent selected state, and we clear both active and no-hover from other rows when selecting a new one to maintain clean state management.

This preserves all your original intended functionality while fixing the delayed deselection visual issue.

内容的提问来源于stack exchange，提问作者user7367398