基于CSS/JS实现悬停分类标签高亮对应词性文本的技术求助

Solution: Interactive Word Highlighting on Tag Hover #

Hey there! This is a fun little UI feature, and it's totally doable with a mix of semantic HTML, CSS, and optionally a touch of JavaScript (for more flexible layouts). Let's break it down step by step.

1. HTML Structure

First, we'll wrap our category tags and the target text in a container, and mark up the relevant words with classes that match their categories:

<div class="highlight-container">
  <div class="tag-bar">
    <span class="category-tag" data-category="noun">Nouns</span>
    <span class="category-tag" data-category="verb">Verbs</span>
  </div>
  <p class="target-paragraph">
    I <span class="word verb">like</span> to <span class="word verb">ride</span> my <span class="word noun">bicycle</span> every <span class="word noun">day</span>.
  </p>
</div>

We use data-category on the tags to link them directly to the word classes, and add a word class to all highlightable words for consistent base styling.

2. Pure CSS Implementation (For Simple Layouts)

If your tags and paragraph are siblings (or the tags are in a container that's a sibling to the paragraph), we can pull this off with pure CSS using hover states and sibling selectors. Here's the style code:

/* Base styles for tags */
.category-tag {
  display: inline-block;
  padding: 6px 14px;
  margin: 0 8px 12px 0;
  border: 1px solid #ddd;
  border-radius: 20px;
  cursor: pointer;
  font-size: 0.9rem;
  transition: background-color 0.2s ease;
}

.category-tag:hover {
  background-color: #f5f5f5;
}

/* Base styles for highlightable words */
.word {
  transition: text-shadow 0.2s ease;
}

/* Highlight nouns when hovering the Nouns tag */
.tag-bar .category-tag[data-category="noun"]:hover ~ .target-paragraph .noun {
  text-shadow: 0 0 10px #2196F3; /* Blue glow for nouns */
}

/* Highlight verbs when hovering the Verbs tag */
.tag-bar .category-tag[data-category="verb"]:hover ~ .target-paragraph .verb {
  text-shadow: 0 0 10px #4CAF50; /* Green glow for verbs */
}

Note: This CSS approach only works if the tag-bar and target-paragraph are direct siblings (like in the HTML above). If your layout is more complex (e.g., tags are in a separate header), you'll need the JavaScript solution below.

3. JavaScript Implementation (Flexible Layouts)

For layouts where the tags and paragraph aren't siblings, we can use JavaScript to listen for hover events and toggle the highlight state manually. Here's how:

First, update the CSS to add a dedicated highlight class (instead of relying on sibling selectors):

.category-tag {
  display: inline-block;
  padding: 6px 14px;
  margin: 0 8px 12px 0;
  border: 1px solid #ddd;
  border-radius: 20px;
  cursor: pointer;
  font-size: 0.9rem;
  transition: background-color 0.2s ease;
}

.category-tag:hover {
  background-color: #f5f5f5;
}

.word {
  transition: text-shadow 0.2s ease;
}

/* Highlight class we'll toggle with JS */
.word.highlight {
  text-shadow: 0 0 10px #FFC107; /* Yellow glow - customize as needed */
}

Then add the JavaScript to handle hover events:

// Get all category tags and highlightable words
const tags = document.querySelectorAll('.category-tag');
const words = document.querySelectorAll('.word');

// Add hover event listeners to each tag
tags.forEach(tag => {
  // When mouse enters the tag
  tag.addEventListener('mouseenter', () => {
    const category = tag.dataset.category;
    // Highlight all words matching the category
    words.forEach(word => {
      if (word.classList.contains(category)) {
        word.classList.add('highlight');
      }
    });
  });

  // When mouse leaves the tag
  tag.addEventListener('mouseleave', () => {
    const category = tag.dataset.category;
    // Remove highlight from all matching words
    words.forEach(word => {
      if (word.classList.contains(category)) {
        word.classList.remove('highlight');
      }
    });
  });
});

This JS approach works regardless of your page layout—you can put the tags anywhere, and it'll still target the correct words.

How It Works

• HTML: We mark up words with classes that match their parts of speech, and tags with data-category attributes to link them to those classes.
• CSS: We add transition effects for smooth hover states, and define the glow effect using text-shadow (you can customize the color and blur to your liking).
• JavaScript (if used): We listen for mouseenter and mouseleave events on each tag, then add/remove the highlight class from all words in the corresponding category.

You can tweak the colors, padding, glow intensity, and layout to match your design system easily!

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