基于XSL生成HTML：实现双图片hover时非悬停图隐藏的技术咨询

Got it, let's get that hover-hide behavior working for your XSL-generated images! Here's a straightforward solution using CSS paired with your existing XSL structure:

Step 1: Clean up & complete your XSL #

First, let's finish and refine your XSL snippet to ensure both images have unique identifiers (classes/IDs) we can target with CSS:

<div id="img-col-block">
  <a target="_blank" href="{id(substring(@facs, 2))/graphic[@n='1']/@url}" class="img-link">
    <img src="{id(substring(@facs, 2))/graphic[@n='1']/@url}" class="hover-img" id="img-1" alt="First image"/>
  </a>
  <a target="_blank" href="{id(substring(@facs, 2))/graphic[@n='2']/@url}" class="img-link">
    <img src="{id(substring(@facs, 2))/graphic[@n='2']/@url}" class="hover-img" id="img-2" alt="Second image"/>
  </a>
</div>

I added shared classes (img-link, hover-img) for easier styling, plus unique IDs for precise targeting.

Step 2: Add the CSS for hover behavior #

Drop this CSS into your HTML's <style> section or external stylesheet—it handles the hide-on-hover logic, plus a smooth transition for better UX:

#img-col-block {
  display: inline-block;
  position: relative; /* Use this if you want images to overlap */
}

.hover-img {
  transition: all 0.3s ease; /* Smooth fade-out/in */
}

/* Hide img-2 when hovering img-1 */
#img-1:hover ~ .img-link #img-2 {
  opacity: 0;
  visibility: hidden;
}

/* Hide img-1 when hovering img-2 */
#img-2:hover ~ .img-link #img-1 {
  opacity: 0;
  visibility: hidden;
}

/* Optional: Make images overlap (remove if you want them side-by-side) */
#img-col-block .hover-img {
  position: absolute;
  top: 0;
  left: 0;
}

• The ~ adjacent sibling selector lets us target the other image when one is hovered.
• Using opacity: 0 + visibility: hidden keeps the transition smooth (unlike display: none, which can't animate).
• The absolute positioning is optional—use it if you want the images to sit on top of each other; remove it if you prefer a side-by-side layout where hiding one shifts the other.

How it works #

When you hover over img-1, the CSS targets img-2 and hides it, and vice versa. The transition makes the hide/show feel less jarring for users.

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