隐藏图像的左半部分，并在鼠标悬停时显示左半部分。

24 浏览
0 Comments

隐藏图像的左半部分，并在鼠标悬停时显示左半部分。

我只需要两张照片，每张照片的一半（左半边来自左图，右半边来自右图），两张图面对面。\n当鼠标悬停在左图上时，显示其右半边，并隐藏右图。\n当鼠标悬停在右图上时，显示其左半边，并隐藏左图。\n我尝试使用overflow:hidden和direction:rtl来隐藏右图的左侧。默认情况下隐藏右侧。\n所以当我悬停在左图上时，它完美地显示并显示了右侧的隐藏部分。\n但是当我悬停在右图上时，无法获取左侧的隐藏部分。\n

.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;
}

\n

0

1 答案

0 Comments

问题的原因是希望将一张图片的左半部分隐藏起来，当鼠标悬停在图片上时，显示左半部分的图片。解决方法是通过CSS的特异性和相邻兄弟选择器来实现。

首先，将两个图片元素放入一个名为.images的容器中，使用flex box来简化水平排列。默认情况下，设置图片元素的样式：

- 占据.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;
}

如果想要对两个图片进行对角线切割并实现相同的效果，可以尝试使用clip-path属性。具体的实现方法可以参考https://css-tricks.com/almanac/properties/c/clip-path。

0