javascript - 隐藏图像的左半部分并在图像悬停时显示左半部分

Question

我只需要两张照片，每张照片的一半(左图左半可见。右图右半可见)两张图片彼此面对。当悬停在左侧图像上时，它显示它的右半部分并消失在右侧图像上。当鼠标悬停在右图上时，它显示左半边，左图消失。

我尝试使用 overflow:hidden 和 direction:rtl 来隐藏右侧图像的左侧。默认隐藏右侧。因此，当我将鼠标悬停在左侧图像上时，它可以完美运行并从右侧显示隐藏部分。但是当我将鼠标悬停在左侧图像上时，我无法从左侧获取隐藏部分。

.imagea {
  max-width: 250px;
  overflow: hidden;
  transition: 2s;
}

.imageb {
  max-width: 250px;
  overflow: hidden;
  direction: rtl;
  transition: 2s;
}

.imagea:hover {
  max-width: 100%;
}

.imagea:hover~.imageb {
  max-width: 0px;
}

.imageb:hover {
  max-width: 100%;
}

.imageb:hover .imagea {
  max-width: 0px;
}

<div class="imagea">
  <img src="https://via.placeholder.com/250" />
</div>
<div class="imageb">
  <img src="https://via.placeholder.com/250" />
</div>

Answer 1

纯 CSS 解决方案可以通过 CSS specificty 实现和 adjacent sibling combinator (即 +)。

您可以使用 flex box 将两个 img 元素包含在 .images 容器中。简化每个图像的水平放置(即在“行轴”上)。默认情况下，为每个图像设置样式以便:

• 占据.images容器宽度的50%
• 占据容器高度的 100%
• 使用 object-position 将自然图像与该图像元素边界的相应侧对齐

使用 :hover 伪类，更新图像元素的宽度，以便:

• 将鼠标悬停在 .images 容器上会导致 .right 图像占据容器的整个宽度，而 .left 图像不会占据整个宽度空间(第一种情况)
• 或者，悬停 .left 图像(比之前的悬停情况更具体)导致 .left 图像占据容器的整个宽度，并且.right 图片不占空间(第二种情况)

在代码中，这可以实现为:

.images {
  width:250px;
  height:250px;
  display:flex;
  flex-direction:row;
}

/* Default state of image element */
.images img {
  width:50%;
  height:100%;
  object-fit:cover;      
  transition:width ease-in-out 0.5s;
}

/* Default placement of image relative to box boundary */
.left {
  object-position:left;
}
.right {
  object-position:right;
}

/* Hover behavior for first case */
.images:hover .left {
  width:0;
}
.images:hover .right {
  width:100%;
}

/* Hover behavior for second case */
.images .left:hover {
  width:100%;
}
.images .left:hover + .right {
  width:0;
}

<div class="images">
  <img class="left" src="https://via.placeholder.com/250/FFFF00" />
  <img class="right" src="https://via.placeholder.com/250/FF00FF" />
</div>

希望对您有所帮助!