如何实现鼠标悬停不同box类元素时，对应blue类元素依次变更背景色

Perfect, I get exactly what you need here—linking each .box to its matching .blue element so hovering the nth box changes the nth blue's background, and keeps that change even after you move the mouse away. Let's break this down into a clean, working solution.

Step 1: HTML Structure #

First, set up your elements so their order corresponds (or use custom attributes for flexibility, which I'll cover later):

<div class="box-group">
  <div class="box">Hover me (Box 1)</div>
  <div class="box">Hover me (Box 2)</div>
  <div class="box">Hover me (Box 3)</div>
</div>

<div class="blue-group">
  <div class="blue">Target 1</div>
  <div class="blue">Target 2</div>
  <div class="blue">Target 3</div>
</div>

Step 2: Base CSS + Active State #

Define your default styles, plus a special .active class to preserve the changed background color:

.box {
  padding: 1.2rem;
  margin: 0.8rem;
  border: 1px solid #555;
  cursor: pointer;
  display: inline-block;
  transition: background-color 0.2s;
}

.box:hover {
  background-color: #f0f0f0; /* Optional: give boxes a hover feedback */
}

.blue {
  padding: 1.2rem;
  margin: 0.8rem;
  background-color: skyblue;
  display: inline-block;
  transition: background-color 0.3s ease;
}

/* This class will stay applied after hover */
.blue.active {
  background-color: #0066cc;
  color: white;
}

Step 3: JavaScript Logic #

We'll use index matching to link each box to its blue counterpart. When you hover a box, we add the .active class to the blue element at the same position:

// Grab all box and blue elements
const boxes = document.querySelectorAll('.box');
const blueElements = document.querySelectorAll('.blue');

// Loop through each box and attach a hover listener
boxes.forEach((box, index) => {
  box.addEventListener('mouseover', () => {
    // Optional: Uncomment below if you want ONLY one blue element active at a time
    // blueElements.forEach(el => el.classList.remove('active'));
    
    // Apply the active state to the matching blue element
    blueElements[index].classList.add('active');
  });
});

Flexible Alternative: Custom Data Attributes #

If your HTML structure isn't strictly ordered (e.g., boxes and blues are in different containers with nested elements), use data-* attributes to explicitly link them:

Updated HTML:

<div class="box-group">
  <div class="box" data-target="blue-1">Hover me (Box 1)</div>
  <div class="box" data-target="blue-2">Hover me (Box 2)</div>
</div>

<div class="blue-group">
  <div class="blue" id="blue-1">Target 1</div>
  <div class="blue" id="blue-2">Target 2</div>
</div>

Updated JavaScript:

const boxes = document.querySelectorAll('.box');

boxes.forEach(box => {
  box.addEventListener('mouseover', () => {
    const targetId = box.dataset.target;
    const targetBlue = document.getElementById(targetId);
    targetBlue.classList.add('active');
  });
});

How It Works #

• The .active class in CSS defines the permanent background color change.
• We use mouseover (instead of mouseenter—though either works here) to trigger the class addition.
• Since we never remove the .active class unless you add that logic, the color change stays even after the mouse moves away.

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