图片映射及悬停效果失效求助（CSS/JQuery解决方案）

Looks like you're hitting a classic issue with responsive images and absolute positioning: your hover circles and content are positioned relative to the page/parent container, not the scaled image itself. When you adjust the image's width/height, those fixed percentage positions don't sync up with the actual image, breaking the hover functionality. Let's fix this with two reliable approaches:

Solution 1: Pure CSS (Recommended for Static/Responsive Scenarios) #

This approach ties all hover elements directly to the image's container, so they scale and position automatically as the image resizes.

Step 1: Restructure Your HTML #

Wrap the image and all hover elements in a single relative-positioned container:

<div class="section-image">
  <div class="image-container">
    <img src="https://preview.ibb.co/iVKhMm/headset.jpg" class="headphone" alt="">
    
    <!-- Hover Effect 1 -->
    <div class="hover-group">
      <div class="loading-content1">
        <div class="loading-circles">
          <div class="circle hold"></div>
          <div class="circle first"></div>
          <div class="circle"></div>
        </div>
      </div>
      <div class="hover-content1">
        <h4 class="hover-head-content">ACOUSTIC NOISE CANCELLING</h4>
        <p class="hover-para-content">More than 40 years of noise-cancelling obsession makes quiet sound quieter and music sound better.</p>
      </div>
    </div>

    <!-- Hover Effect 2 -->
    <div class="hover-group">
      <div class="loading-content2">
        <div class="loading-circles">
          <div class="circle hold"></div>
          <div class="circle first"></div>
          <div class="circle"></div>
        </div>
      </div>
      <div class="hover-content2">
        <h4 class="hover-head-content">ACOUSTIC NOISE CANCELLING</h4>
        <p class="hover-para-content">More than 40 years of noise-cancelling obsession makes quiet sound quieter and music sound better.</p>
      </div>
    </div>

    <!-- Hover Effect 3 -->
    <div class="hover-group">
      <div class="loading-content3">
        <div class="loading-circles">
          <div class="circle hold"></div>
          <div class="circle first"></div>
          <div class="circle"></div>
        </div>
      </div>
      <div class="hover-content3">
        <h4 class="hover-head-content">ACOUSTIC NOISE CANCELLING</h4>
        <p class="hover-para-content">More than 40 years of noise-cancelling obsession makes quiet sound quieter and music sound better.</p>
      </div>
    </div>

    <!-- Hover Effect 4 -->
    <div class="hover-group">
      <div class="loading-content4">
        <div class="loading-circles">
          <div class="circle hold"></div>
          <div class="circle first"></div>
          <div class="circle"></div>
        </div>
      </div>
      <div class="hover-content4">
        <h4 class="hover-head-content">ACOUSTIC NOISE CANCELLING</h4>
        <p class="hover-para-content">More than 40 years of noise-cancelling obsession makes quiet sound quieter and music sound better.</p>
      </div>
    </div>
  </div>
</div>

Step 2: Updated CSS #

/* Core: Container ties all elements to the image */
.image-container {
  position: relative;
  width: 50%; /* Match your image's desired width */
  margin: 0 auto;
  padding: 200px;
}

.headphone {
  width: 100%;
  height: auto;
  display: block; /* Remove unwanted space below image */
}

/* Wrap each hover pair to keep them linked */
.hover-group {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Hide hover content by default */
.hover-content1, .hover-content2, .hover-content3, .hover-content4 {
  display: none;
  position: absolute;
  width: 15%;
  flex-direction: column;
  text-align: justify;
  padding: 5px;
  color: #ffffff;
  background: rgba(0,0,0,0.5);
  transition: all 0.3s ease;
}

/* Show content when hovering the circle area */
.loading-content1:hover ~ .hover-content1,
.loading-content2:hover ~ .hover-content2,
.loading-content3:hover ~ .hover-content3,
.loading-content4:hover ~ .hover-content4 {
  display: flex;
}

/* Text styling (unchanged) */
h4.hover-head-content {
  margin: 0;
  padding: 2px 4px 5px;
  font-size: 10px;
  font-weight: bold;
}

p.hover-para-content {
  margin: 0;
  padding: 4px;
  font-size: 12px;
  line-height: 1.4;
}

/* Position elements relative to the image container */
.hover-content1 { top: 15%; left: 13%; }
.hover-content2 { top: 55%; left: 16%; }
.hover-content3 { top: 58%; left: 36%; }
.hover-content4 { top: 1%; left: 36%; }

.loading-content1 .loading-circles { position:absolute; left:19%; top:37%; }
.loading-content2 .loading-circles { position:absolute; left:29%; top:53%; }
.loading-content3 .loading-circles { position:absolute; left:37%; top:50%; }
.loading-content4 .loading-circles { position:absolute; left:38%; bottom: 65%; }

/* Circle animation (unchanged) */
.loading-circles > .circle{
  display: inline-block;
  position: absolute;
  height: 15px;
  width: 15px;
  border-radius: 50%;
  transform-origin: 0 0;
  transform: scale(1,1)translate(-50%,-50%);
  animation: fade 1s linear infinite;
  background: red;
  opacity: 1;
}

.circle.hold{ animation:none; }
.circle.first+.circle{ animation-delay:.33s; }
.circle.first+.circle+.circle{ animation-delay:.66s; }

@keyframes fade {
  from{ opacity:1; transform:scale(1,1)translate(-50%,-50%); }
  to{ opacity:0; transform:scale(2,2)translate(-50%,-50%); }
}

Solution 2: jQuery (For Dynamic Image Size Changes) #

If your image size changes dynamically (e.g., on window resize), use jQuery to recalculate positions in real-time.

Updated CSS (Add This) #

.hover-content1, .hover-content2, .hover-content3, .hover-content4 {
  opacity: 0;
  transition: opacity 0.3s ease;
  /* Keep your existing styling */
}

jQuery Code #

<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script>
function adjustHoverPositions() {
  const $img = $('.headphone');
  const imgWidth = $img.width();
  const imgHeight = $img.height();
  const imgOffset = $img.offset();

  // Update circle positions
  $('.loading-content1 .loading-circles').css({
    left: imgOffset.left + (imgWidth * 0.19),
    top: imgOffset.top + (imgHeight * 0.37)
  });
  $('.loading-content2 .loading-circles').css({
    left: imgOffset.left + (imgWidth * 0.29),
    top: imgOffset.top + (imgHeight * 0.53)
  });
  $('.loading-content3 .loading-circles').css({
    left: imgOffset.left + (imgWidth * 0.37),
    top: imgOffset.top + (imgHeight * 0.50)
  });
  $('.loading-content4 .loading-circles').css({
    left: imgOffset.left + (imgWidth * 0.38),
    top: imgOffset.top + (imgHeight * 0.35) // Convert bottom:65% to top:35%
  });

  // Update hover content positions
  $('.hover-content1').css({
    left: imgOffset.left + (imgWidth * 0.13),
    top: imgOffset.top + (imgHeight * 0.15)
  });
  $('.hover-content2').css({
    left: imgOffset.left + (imgWidth * 0.16),
    top: imgOffset.top + (imgHeight * 0.55)
  });
  $('.hover-content3').css({
    left: imgOffset.left + (imgWidth * 0.36),
    top: imgOffset.top + (imgHeight * 0.58)
  });
  $('.hover-content4').css({
    left: imgOffset.left + (imgWidth * 0.36),
    top: imgOffset.top + (imgHeight * 0.01)
  });
}

// Initialize on load and resize
$(document).ready(function() {
  adjustHoverPositions();
  
  // Hover events
  $('.loading-content1').hover(() => $('.hover-content1').css('opacity',1), () => $('.hover-content1').css('opacity',0));
  $('.loading-content2').hover(() => $('.hover-content2').css('opacity',1), () => $('.hover-content2').css('opacity',0));
  $('.loading-content3').hover(() => $('.hover-content3').css('opacity',1), () => $('.hover-content3').css('opacity',0));
  $('.loading-content4').hover(() => $('.hover-content4').css('opacity',1), () => $('.hover-content4').css('opacity',0));

  $(window).resize(adjustHoverPositions);
});
</script>

Key Notes #

• Pure CSS: Best for most cases—clean, lightweight, and no JS dependency. All positions are relative to the image container, so they scale automatically.
• jQuery: Use this if you need to handle dynamic image size changes (e.g., responsive layouts that change image width on different screen sizes).

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