使用:hover伪类时图片不改变透明度的CSS/HTML问题求助

Got it, let's get this hover reveal functionality working! The most common reason this fails is that your CSS selectors can't target the right elements because of an incorrect HTML structure. Here's a complete, working solution:

Working HTML Structure #

First, make sure all your images are wrapped in a shared parent container—this lets CSS use sibling selectors to target the hidden images when you hover the trigger:

<div class="image-container">
  <!-- Hover this image to reveal the others -->
  <img src="your-main-image.jpg" alt="Main image" class="trigger-img">
  
  <!-- Images to reveal on hover -->
  <img src="reveal-image-1.jpg" alt="Reveal image 1" class="hidden-img">
  <img src="reveal-image-2.jpg" alt="Reveal image 2" class="hidden-img">
</div>

Corresponding CSS #

This code sets the hidden images to opacity: 0 by default, adds a smooth transition, and uses the general sibling selector (~) to make them visible when hovering the trigger image:

/* Parent container: keeps images grouped together */
.image-container {
  display: inline-block; /* Adjust to your layout needs */
  position: relative; /* Required if you want to position hidden images over the main one */
}

/* Trigger image: add cursor to signal interactivity */
.trigger-img {
  cursor: pointer;
  /* Optional: set fixed size for consistency */
  width: 300px;
  height: 200px;
  object-fit: cover;
}

/* Hidden images: start invisible with smooth transition */
.hidden-img {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  margin-left: 10px; /* Spacing between images (adjust as needed) */
  
  /* Optional: Position images over the main one */
  /* position: absolute;
  width: 120px;
  height: 120px;
  top: 20px;
  left: 20px; */
}

/* Show hidden images when hovering the trigger */
.trigger-img:hover ~ .hidden-img {
  opacity: 1;
}

Key Notes to Avoid Failure #

• Sibling Element Requirement: The hidden images must be direct siblings of the trigger image (same parent container). If your structure nests them in different divs, the ~ selector won't work.
• Transition Smoothness: Adding transition makes the reveal feel polished instead of jarring—you can adjust the 0.3s value to make it faster/slower.
• Positioning: If you want the hidden images to overlay the main one instead of sitting next to it, uncomment the position: absolute lines in .hidden-img and adjust top/left to place them exactly where you want.

If your original code had a different structure, just refactor it to keep the trigger and hidden images under the same parent, and the selector will target them correctly.

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