自制轮播图左右箭头：实现超出图片边界隐藏及hover过渡效果

你想要实现轮播图左右箭头的效果：箭头带有过渡动画，常态下超出图片边界隐藏，鼠标hover时显示，但当前代码无法实现箭头超出边界隐藏的效果，修复方案如下：

核心修复点 #

• 给.imageslider添加overflow: hidden属性，让容器外的元素被裁剪，实现箭头超出边界隐藏
• 调整箭头初始位置与hover位置的数值，保证过渡动画自然流畅
• 移除右侧箭头初始的z-index: -1，无需靠层级隐藏（overflow已处理）

修改后的完整代码 #

CSS代码 #

* {
  box-sizing: border-box;
}

body {
  background: green;
}

.imageslider {
  position: relative;
  width: 100%;
  border: 1px solid gray;
  overflow: hidden; /* 新增：裁剪容器外元素 */
}

.source {
  width: 100%;
  height: 600px;
}

.image {
  width: 100%;
  height: 100%;
}

.left {
  position: absolute;
  top: 50%;
  left: -60px; /* 初始在容器左侧外 */
  border-radius: 50%;
  padding: 15px;
  border: 3px solid white;
  color: white;
  transform: translateY(-50%);
  transition: all 0.3s ease; /* 调整过渡时长更自然 */
  cursor: pointer;
}

.right {
  position: absolute;
  top: 50%;
  right: -60px; /* 初始在容器右侧外 */
  border-radius: 50%;
  padding: 15px;
  border: 3px solid white;
  color: white;
  transform: translateY(-50%);
  transition: all 0.3s ease; /* 调整过渡时长更自然 */
  cursor: pointer;
}

.imageslider:hover .left {
  left: 40px; /* hover时移到容器内左侧 */
}

.imageslider:hover .right {
  right: 40px; /* hover时移到容器内右侧 */
}

.flexcheck {
  display: flex;
}

.test1 {
  flex: 80%;
  border: 1px solid yellow;
}

.test {
  flex: 20%;
  border: 1px solid pink;
}

HTML代码 #

<div class="flexcheck">
  <div class="test1">
    <div class="imageslider">
      <div class="source">
        <img src="berth.jpg" class="image">
      </div>
      <!--<div class="source">
                    <img src="apartment.jpg" class="image2">
                </div> -->
      <span class="left"><i class="fa-solid fa-less-than"></i></span>
      <span class="right"><i class="fa-solid fa-greater-than"></i></span>
    </div>
  </div>
  <div class="test" style="background: aqua;">
  </div>
</div>

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