精简实现多组Div悬停联动显示隐藏的JavaScript代码

Hey there! I get it—dealing with repetitive hardcoding for 25+ element pairs sounds like a nightmare, especially when CSS can’t handle your layout. Let’s fix this with a clean, scalable JavaScript approach that’ll grow with your needs without extra work.

Step 1: Refactor Your HTML for Reusability #

First, ditch the reliance on numbered IDs for individual triggers and targets. Instead, use shared classes and a data-target attribute to link each option to its corresponding image. This way, we can treat every pair the same way:

<!-- Wrap your options in a container (optional but recommended for event delegation) -->
<div class="option-container">
  <div class="hover-option" data-target="image1">Option 1</div>
  <div class="hover-option" data-target="image2">Option 2</div>
  <div class="hover-option" data-target="image3">Option 3</div>
  <div class="hover-option" data-target="image4">Option 4</div>
  <!-- Add 20+ more here later—no JS changes needed! -->
</div>

<!-- Your image containers -->
<div id="image1" class="hover-image" style="display: none;">Image 1 Content</div>
<div id="image2" class="hover-image" style="display: none;">Image 2 Content</div>
<div id="image3" class="hover-image" style="display: none;">Image 3 Content</div>
<div id="image4" class="hover-image" style="display: none;">Image 4 Content</div>
<!-- Match these to your options' data-target values -->

Step 2: Basic CSS (Default Hide) #

Start by hiding all images by default—you can skip inline styles if you prefer this:

.hover-image {
  display: none;
}

Step 3: Scalable JavaScript (No Hardcoding!) #

We’ll use event delegation to listen for hover events on a parent container instead of each individual option. This means new options you add later will automatically work without updating the JS:

// Get the parent container of your options (use document if no container exists)
const optionContainer = document.querySelector('.option-container');

// Function to show the linked image
function showImage(event) {
  // Make sure we're interacting with an option element
  const option = event.target.closest('.hover-option');
  if (!option) return;

  // Optional: Hide all images first to ensure only one is visible at a time
  document.querySelectorAll('.hover-image').forEach(img => {
    img.style.display = 'none';
  });

  // Get the target image ID from the data attribute and show it
  const targetImageId = option.dataset.target;
  const targetImage = document.getElementById(targetImageId);
  if (targetImage) {
    targetImage.style.display = 'block'; // Use 'flex' or another value if your layout needs it
  }
}

// Function to hide the image when hovering out
function hideImage(event) {
  const option = event.target.closest('.hover-option');
  if (!option) return;

  const targetImageId = option.dataset.target;
  const targetImage = document.getElementById(targetImageId);
  if (targetImage) {
    targetImage.style.display = 'none';
  }
}

// Attach event listeners to the parent container
optionContainer.addEventListener('mouseenter', showImage);
optionContainer.addEventListener('mouseleave', hideImage);

Why This Works for 25+ Pairs #

• No hardcoding: You never have to write document.getElementById('option1') or repeat event listeners for each pair.
• Auto-scalable: When you add a new option-image pair, just copy the HTML structure, update the data-target and corresponding image ID, and you’re done—JS stays the same.
• Clean maintenance: If you need to change how images are shown/hidden, you only update one function instead of 25+.

Bonus: UX Tweaks #

• mouseenter/mouseleave avoid unwanted trigger fires when hovering child elements inside an option (better than mouseover/mouseout).
• If you want to keep the last image visible when not hovering any option, remove the "hide all images" block in showImage.

内容的提问来源于stack exchange，提问作者M. Cibene