基于Cargo Collective平台：实现多组图片Hover切换并保留链接功能的CSS/HTML方案求助

Hey there! Totally get where you're coming from—trying to adapt Cargo's default hover code to work with multiple image pairs can be tricky, but it's definitely doable with some targeted HTML and CSS tweaks. Let's break this down to get your banner working exactly how you want it.

Core Idea #

Instead of using a global hover trigger, we'll wrap each "trigger image" (the one users see initially) and its corresponding "hover image" in a dedicated container. This way, the hover event only affects the paired image for each link, keeping everything isolated and functional.

Step 1: Updated HTML Structure #

Replace your existing banner code with this structure—each link + hover image pair gets its own container:

<!-- Banner Container - adjust layout styles here for your banner -->
<div class="banner-wrapper">
  <!-- Image Pair 1 -->
  <div class="hover-image-group">
    <a href="/your-internal-page-1" class="trigger-link">
      <img src="path-to-image-1.1.jpg" alt="Banner Image 1">
    </a>
    <div class="hover-overlay">
      <img src="path-to-image-1.2.jpg" alt="Hover Image 1">
    </div>
  </div>

  <!-- Image Pair 2 -->
  <div class="hover-image-group">
    <a href="/your-internal-page-2" class="trigger-link">
      <img src="path-to-image-2.1.jpg" alt="Banner Image 2">
    </a>
    <div class="hover-overlay">
      <img src="path-to-image-2.2.jpg" alt="Hover Image 2">
    </div>
  </div>

  <!-- Image Pair 3 -->
  <div class="hover-image-group">
    <a href="/your-internal-page-3" class="trigger-link">
      <img src="path-to-image-3.1.jpg" alt="Banner Image 3">
    </a>
    <div class="hover-overlay">
      <img src="path-to-image-3.2.jpg" alt="Hover Image 3">
    </div>
  </div>
</div>

Step 2: Custom CSS Code #

Add this CSS to your Cargo site's custom styles section (replace the code Cargo provided with this):

/* Banner wrapper - make images align in a row for your banner */
.banner-wrapper {
  display: flex;
  gap: 0; /* Remove gap if you want images to touch */
  width: 100%;
}

/* Group container - isolates each trigger/hover pair */
.hover-image-group {
  position: relative;
  flex: 1; /* Makes each image take equal space in the banner */
}

/* Trigger link - keeps the image clickable */
.trigger-link {
  display: block;
  pointer-events: auto;
  cursor: pointer;
  width: 100%;
}

.trigger-link img {
  width: 100%;
  height: auto;
  display: block;
}

/* Hover image - hidden by default */
.hover-overlay {
  visibility: hidden;
  position: fixed; /* Keeps hover image centered on screen */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 999; /* Ensures hover image appears above other content */
  pointer-events: none; /* Prevents hover image from blocking link clicks */
  width: 90vw;
  height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hover-overlay img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
}

/* Show hover image when its group is hovered (non-mobile only) */
body:not(.mobile) .hover-image-group:hover .hover-overlay {
  visibility: visible;
}

Key Adjustments & Notes #

• Banner Layout: The .banner-wrapper uses flexbox to make the three images stretch equally across your banner. Adjust gap or add padding if you want space between images.
• Positioning: The hover image uses position: fixed to stay centered on the screen, just like Cargo's original code. If you want the hover image to appear right above the trigger image instead, change .hover-overlay to position: absolute and adjust top/left values.
• Link Functionality: We kept pointer-events: auto on the trigger links so they remain clickable, while setting pointer-events: none on the hover images to avoid interfering with clicks.
• Mobile Compatibility: We retained Cargo's body:not(.mobile) check to disable hover effects on mobile, preventing accidental taps from triggering the overlay.

Final Tweaks #

• Replace all path-to-image-*.jpg with your actual image URLs.
• Update the href values to match your internal page links.
• If Cargo's default styles conflict with this code, add !important to specific properties (e.g., visibility: visible !important;) as a last resort.

This setup should give you exactly what you need: each banner image shows its unique hover counterpart when moused over, and all links remain fully functional. Let me know if you need help adjusting the layout or positioning to fit your brand's design!

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