如何保存inline背景图并实现hover切换背景色与原背景图？

Hey there! Let's tackle this issue—you want a semi-transparent solid color overlay on hover for your .img-link divs, without affecting the text, and you ran into problems restoring the original background image with JavaScript. I'll share two approaches: a clean CSS-only solution (best for your use case) and a fixed JavaScript method that works as you initially tried.

CSS-Only Approach (Recommended) #

This method avoids JavaScript entirely and is far more reliable for your goal. We'll use a pseudo-element to create the overlay, which sits behind your text and only appears on hover.

Updated CSS: #

.img-link {
  position: relative;
  width: 100%;
  height: 200px;
  background-size: cover;
  /* Keep your existing styles here */
}

/* Add this overlay pseudo-element */
.img-link::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #9b7878a8; /* Your semi-transparent color */
  opacity: 0;
  transition: opacity 0.3s ease; /* Smooth hover transition */
  z-index: 0; /* Ensures overlay stays behind text */
}

.img-link:hover::before {
  opacity: 1; /* Show overlay on hover */
}

/* Ensure text stays above the overlay */
.img-link .text {
  position: absolute;
  top: 10px;
  z-index: 1; /* Add this to lift text above the overlay */
}

Why this works: #

• The ::before pseudo-element acts as a separate layer over your background image, so hovering doesn't replace the original background.
• Your text has a higher z-index, so it's never affected by the overlay's opacity.
• No need to modify your inline background-image from WordPress—this just adds on top of it.
• Smooth transition makes the hover effect feel polished.

Fixed JavaScript Approach #

If you need to use JavaScript for some reason, here's how to properly save and restore each element's original background image. The issue with your initial code was that background: initial doesn't restore the original image—instead, we'll save each image to a data attribute or array first.

Option 1: Use Data Attributes (Simpler) #

We'll store each .img-link's original background image in a custom data attribute, then retrieve it on mouseout:

// Save original background images to each element's data attribute
$('.img-link').each(function() {
  $(this).data('original-bg', $(this).css('background-image'));
});

// Handle hover events
$('.img-link')
  .mouseover(function() {
    $(this).css({
      'background-image': 'none', // Hide original image
      'background-color': '#9b7878a8' // Apply semi-transparent color
    });
  })
  .mouseout(function() {
    // Restore original background image
    $(this).css({
      'background-image': $(this).data('original-bg'),
      'background-color': 'transparent' // Reset color
    });
  });

Option 2: Use an Array #

If you prefer using an array, we'll map each element's index to its background image:

// Create array to store original background images
const originalBackgrounds = [];

// Populate the array with each element's background
$('.img-link').each(function(index) {
  originalBackgrounds[index] = $(this).css('background-image');
});

// Handle hover events
$('.img-link')
  .mouseover(function() {
    $(this).css({
      'background-image': 'none',
      'background-color': '#9b7878a8'
    });
  })
  .mouseout(function() {
    // Get the element's index to fetch the correct image
    const elementIndex = $('.img-link').index(this);
    $(this).css({
      'background-image': originalBackgrounds[elementIndex],
      'background-color': 'transparent'
    });
  });

Why this fixes your issue: #

• We explicitly save the original background-image value instead of relying on initial, which doesn't preserve inline styles.
• Each element gets its own original image restored, so you won't have empty backgrounds after hover.

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