鼠标悬停切换img src时如何添加过渡效果？

Nice job getting the basic image swap working perfectly! The issue with your current code is that swapping the src attribute directly doesn't give CSS a chance to animate the change—since the image element just switches out instantly. Using opacity for a smooth fade is a great choice, and here are two solid approaches to implement it:

Approach 1: Dual Image Container (Most Reliable & Flexible) #

This method uses two overlapping image elements inside a container, with CSS handling the opacity transition. It’s clean, performant, and easy to adjust.

Step 1: Update Your HTML #

Wrap your images in a container to keep them positioned correctly:

<div class="project-image-container">
  <img src="../img/img1.png" alt="Default project view" class="default-image">
  <img src="../img/img2.png" alt="Hover project view" class="hover-image">
</div>

Step 2: Add CSS for Positioning & Transitions #

Style the container and images to overlap, then define the fade transition:

.project-image-container {
  position: relative;
  /* Set dimensions to match your images (or let images dictate size) */
  width: 400px;
  height: 300px;
}

.default-image, .hover-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Preserve image aspect ratio */
  transition: opacity 0.4s ease-in-out; /* Adjust duration/timing as needed */
}

.hover-image {
  opacity: 0; /* Start with hover image hidden */
}

Step 3: Choose CSS or JS for Hover Control #

Option A: Pure CSS (No Extra JS Needed)

If you don’t need complex hover logic, let CSS handle the state change:

.project-image-container:hover .hover-image {
  opacity: 1;
}

Option B: JavaScript Control (For Custom Logic)

If you need to keep using JS (e.g., for dynamic image sources), update your event listeners to toggle opacity instead of swapping src:

const container = document.querySelector('.project-image-container');
const hoverImage = container.querySelector('.hover-image');

container.addEventListener('mouseover', () => {
  hoverImage.style.opacity = '1';
});

container.addEventListener('mouseleave', () => {
  hoverImage.style.opacity = '0';
});

Approach 2: Single Image + Background Fallback (Minimal HTML) #

If you want to avoid extra HTML elements, you can use the image element’s background to hold the hover image, then fade the foreground image out on hover:

HTML & CSS #

<img src="../img/img1.png" alt="Project image" class="project-image">

.project-image {
  width: 400px;
  height: 300px;
  object-fit: cover;
  transition: opacity 0.4s ease-in-out;
  /* Set hover image as background */
  background-image: url('../img/img2.png');
  background-size: cover;
  background-position: center;
}

.project-image:hover {
  opacity: 0; /* Fade out foreground to reveal background */
}

Note: This works best if both images are the exact same size—otherwise the background might misalign.

Final Recommendation #

I’d go with Approach 1 for most cases: it’s more maintainable, handles image size variations better, and keeps your logic separated (CSS for styling/animations, JS for interactivity if needed).

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